<template>
  <ele-modal
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    title="选择记录事项"
    @update:visible="updateVisible"
    :maxable="true"
    width="90%"
  >
    <el-card shadow="never" v-loading="loading">
      <search
        @search="reload"
        :options_groupId="dictObj.groupId"
        :options_factory="dictObj.factory"
      />
      <ele-pro-table
        ref="tableRef"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
      >
        <!-- 单选列 -->
        <template v-slot:radio="{ row }">
          <el-radio
            class="radio"
            v-model="currentRowId"
            :label="row.id"
            @change="radioChange($event, row)"
            ><i></i
          ></el-radio>
        </template>
      </ele-pro-table>
    </el-card>
    <template v-slot:footer>
      <el-button type="primary" @click="confirmSelection"> 选择 </el-button>

      <el-button @click="visible = false">关闭</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import search from './search.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import dictMixins from '@/mixins/dictMixins';
  import { getFactoryarea } from '@/api/factoryModel/index';
  import { listOrganizations } from '@/api/system/organization';

  export default {
    components: { search },
    mixins: [tabMixins, dictMixins],
    props: {
      // 是否多选
      multiple: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      columns() {
        const list = [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '车间编码'
          },
          {
            label: '车间名称',
            prop: 'name'
          },
          {
            label: '所属公司',
            prop: 'groupId',
            slot: 'groupId'
          },
          {
            label: '所属工厂',
            prop: 'factoryName'
          },
          {
            label: '所属厂房',
            prop: 'workshopPlanName',
            slot: 'factory'
          },
          {
            label: '所属区域',
            prop: 'areaName'
          },
          {
            label: '详细地址',
            prop: 'extInfo.location'
          }
        ];

        if (this.multiple) {
          list.unshift({
            type: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left',
            selectable: (row) => {
              return !this.activeIds.includes(row.id);
            }
          });
        } else {
          list.unshift({
            prop: 'radio',
            width: 50,
            align: 'center',
            fixed: 'left',
            slot: 'radio'
          });
        }

        return list;
      }
    },
    data() {
      return {
        loading: false,
        visible: false,
        selection: [],
        currentRowId: null,
        currentRow: null,
        activeIds: [],
        dictObj: {
          groupId: [],
          factory: []
        }
      };
    },
    created() {
      this.getGs();
      this.getFactoryarea();
    },
    methods: {
      open(activeIds = []) {
        this.visible = true;
        this.selection = [];
        this.currentRowId = null;
        this.currentRow = null;
        this.activeIds = activeIds;
        this.reload(); // 刷新表格
      },
      updateVisible(val) {
        this.visible = val;
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return getFactoryarea({
          pageNum: page,
          size: limit,
          type: 3,
          ...where
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.tableRef?.reload({
          page: 1, // 已发布
          where
        });
      },
      confirmSelection() {
        if (this.multiple && this.selection.length === 0) {
          this.$message.warning('请先选择车间区域');
          return;
        }

        if (!this.multiple && !this.currentRow) {
          this.$message.warning('请先选择车间区域');
          return;
        }

        this.$emit('confirm', this.multiple ? this.selection : this.currentRow);
        this.visible = false;
      },
      radioChange(_, row) {
        this.currentRow = row;
      },
      // 获取公司数据
      getGs() {
        listOrganizations().then((list) => {
          console.log(list);
          this.dictObj.groupId = list;
        });
      },
      // 获取工厂数据
      getFactoryarea() {
        let par = {
          type: 1,
          size: 9999
        };
        getFactoryarea(par).then((res) => {
          this.dictObj.factory = res.list;
        });
      }
    }
  };
</script>
