<template>
  <div class="page-view">
    <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" label-width="100px" @query="onQuery" @reset="onReset">
      <app-filter-item :span="6" label="共享资源名称">
        <el-input v-model="filters.name" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>
      <app-filter-item :span="6" label="共享方式">
        <!--        <el-input v-model="filters.name" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />-->
        <el-select v-model="filters.value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </app-filter-item>
      <!--      <app-filter-item label="发布状态">-->
      <!--        <el-radio-group v-model="filters.isCreateTable">-->
      <!--          <el-radio-button v-for="radio in createdList" :key="radio.value" :label="radio.value">{{ radio.label }} </el-radio-button>-->
      <!--        </el-radio-group>-->
      <!--      </app-filter-item>-->

      <!--          <app-filter-item :span="6" label="数据库表名">-->
      <!--            <el-input v-model="filters.tableName" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />-->
      <!--          </app-filter-item>-->
    </app-filter>

    <!-- 列表组件 -->
    <div class="pa-11 bg-white h-100 flex-col mt-11 border-radius-5">
      <div class="mb-15">
        <el-button icon="el-icon-s-tools" size="mini" type="primary" @click="Visible = true">资源授权</el-button>
      </div>
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        @pagination-change="onPaginationChange"
        @row-dblclick="editData"
      >
        <!-- 插槽 -->
        <!--        <template #isCreateTable="scope">-->
        <!--          <el-tag :type="!!scope.row.isCreateTable ? '' : 'warning'">{{ scope.row.isCreateTable ? '发布' : '未发布' }} </el-tag>-->
        <!--        </template>-->
      </app-table>
    </div>

    <!-- dialog组件 -->
    <detail-dialog v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="onCompanyConfirm" />
    <el-dialog :before-close="handleClose" :visible.sync="Visible" title="选择资源" top="80px" width="80%">
      <auth />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import tableMixin from '@/mixins/table.js'; // 列表mixins
import DetailDialog from './DetailDialog.vue';
import auth from './components/auth.vue';

export default {
  components: { DetailDialog, auth },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      filters: {
        isCreateTable: '',
      },
      // createdList: [
      //   // { label: '全部', value: '' },
      //   { label: '发布', value: 1 },
      //   { label: '未发布', value: 0 },
      // ],
      // 列表表头
      columns: [
        { label: '共享资源名称', prop: 'name', width: '200px' },
        { label: '共享资源代码', prop: 'code', width: '250px' },
        { label: '共享方式', prop: 'shared', width: '200px' },
        { label: '共享资源类型', prop: 'typed', width: '200px' },
        // { label: '是否开启数据库', prop: 'level', width: '100px' },
        // { label: '是否共享API共享', prop: 'mode', width: '100px' },
        // { label: '是否开启离线文件共', prop: 'query', width: '100px' },
        // {
        //   label: '发布状态',
        //   prop: 'isCreateTable',
        //   dataType: 'slot',
        //   dataType: 'slot',
        //   slot: 'isCreateTable',
        // },
        { label: '资源描述', prop: 'resourceDescription', width: '400px' },
        {
          dataType: 'option',
          label: '操作',
          width: '230px',
          fixed: 'right',
          operation: [
            {
              // name: '资源项查询',
              name: '查看',
              icon: 'el-icon-edit',
              // showHide: (row) => {},
              clickFun: (row) => {
                this.show(row);
                // this.$emit('onTableClick', row, 'dataSource')
              },
            },
            {
              name: '删除',
              icon: 'el-icon-document',
              // showHide: (row) => {},
              clickFun: (row) => {
                // this.$emit('onTableClick', row, 'dataSource')
                this.delCompany(row);
              },
            },
          ],
        },
      ],
    };

    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
    };

    return {
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      drawerVisible: false, // 控制抽屉显示和隐藏的变量
      Visible: false,
      options: [
        { value: '选项1', label: '全量共享' },
        { value: '选项2', label: '增量共享' },
        { value: '选项3', label: '全量+增量' },
      ],
      value: '',
      // activeName: 'first',
    };
  },
  mounted() {},
  methods: {
    // 联通接口后 该方法可用table.js  Mixins里的getData方法替代 ，此处只为静态页面开发使用
    getData() {
      this.tableLoading = true;
      setTimeout(() => {
        this.tableData = [
          {
            id: '1',
            name: '资源1',
            code: 'aaa',
            shared: '全量共享',
            typed: 'strong',
            resourceDescription: 'asahdahhdu',
          },
        ];
        this.tableLoading = false;
      }, 1000);
    },
    addData() {
      this.dialogTitle = '新增';
      this.currentRow = null;
      this.dialogVisible = true;
    },
    editData(row) {
      this.dialogTitle = `编辑 - ${row.name}`;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    delCompany(row) {
      this.$confirm(`此操作将永久删除该授权资源项（${row.name}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const ind = this.tableData.findIndex((o) => o.id == row.id);
        ind >= 0 && this.tableData.splice(ind, 1);
      });
    },
    onCompanyConfirm(data) {
      const id = `${this.tableData.length + 1}`;
      if (data?.id) {
        console.log(data);
        const ind = this.tableData.findIndex((o) => o.id == data.id);
        ind >= 0 && this.tableData.splice(ind, 1, data);
      } else {
        this.tableData.push({ ...data, id });
      }
      console.log(this.tableData);
      this.dialogVisible = false;
    },

    show(row) {
      this.dialogTitle = '数据详情';
      this.currentRow = row;
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped></style>
