<template>
  <a-row :gutter="24">
    <a-col :lg="6" :md="7" :sm="24" :xl="5">
      <a-card title="设备" :bordered="true">
        <a-tree :tree-data="deviceTypes" @select="handleSelect" />
      </a-card>
    </a-col>
    <a-col :lg="18" :md="17" :sm="24" :xl="19" style="padding-left: 0">
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button :disabled="canAdd !== true" @click="handleAdd" type="primary" icon="plus">选择人员</a-button>
          <a-button type="primary" icon="download" @click="handleExportXls('派工预设')">导出</a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
          </a-dropdown>
        </div>

        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>

          <a-table
            ref="table"
            size="middle"
            :scroll="{x:true}"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            class="j-table-force-nowrap"
            @change="handleTableChange">

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text,record">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="downloadFile(text)">
                下载
              </a-button>
            </template>

            <span slot="action" slot-scope="text, record">
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </span>

          </a-table>
        </div>

        <work-division-set-modal ref="modalForm" @ok="modalFormOk"></work-division-set-modal>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import WorkDivisionSetModal from './modules/WorkDivisionSetModal'
  import { getAction } from '@api/manage'

  export default {
    name: 'WorkDivisionSetList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      WorkDivisionSetModal
    },
    data () {
      return {
        canAdd: false,
        description: '派工预设管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          // {
          //   title:'人员编号',
          //   align:"center",
          //   dataIndex: 'executor'
          // },
          {
            title:'人员姓名',
            align:"center",
            dataIndex: 'executorName'
          },
          {
            title:'联系电话',
            align:"center",
            dataIndex: 'execPhone'
          },
          {
            title:'人员类型',
            align:"center",
            dataIndex: 'torType_dictText'
          },
          {
            title: '资质',
            align: "center",
            dataIndex: 'postage_dictText'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          // listDeviceType: '/device/buDeviceType/list/all',
          list: "/workOrder/workDivisionSet/list",
          // listSimpleRegular: '/regular/regular/simplelist',
          listDeviceType: '/regular/regular/deviceTypeTree',
          delete: "/workOrder/workDivisionSet/delete",
          deleteBatch: "/workOrder/workDivisionSet/deleteBatch",
          exportXlsUrl: "/workOrder/workDivisionSet/exportXls",
          importExcelUrl: "workOrder/workDivisionSet/importExcel",

        },
        dictOptions:{},
        deviceTypes: [],
        superFieldList:[],
      }
    },
    created() {
      this.loadAllDeviceType();
      this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'regularId',text:'修程/故障类型',dictCode:''})
        fieldList.push({type:'string',value:'executor',text:'人员编号',dictCode:''})
        fieldList.push({type:'int',value:'torType',text:'人员类型',dictCode:''})
        fieldList.push({type:'string',value:'remark',text:'备注',dictCode:''})
        this.superFieldList = fieldList
      },
      handleAdd() {
        this.$refs.modalForm.add(this.queryParam);
        this.$refs.modalForm.disableSubmit = false;
      },
      handleSelect(id, level) {
        if (id && !level.node.$options.propsData.dataRef.children) {
          console.log('选择检修规程', id, level)
          this.canAdd = true
          this.queryParam.regularId = id[0]
          this.loadData()
        } else {
          this.queryParam.regularId = null
          this.canAdd = false
          this.dataSource = []
        }
      },
      loadAllDeviceType() {
        getAction(this.url.listDeviceType, { calss: '1' }).then((res) => {
          if (res.success) {
            this.deviceTypes = this.convertToTreeSelect(res.result)
          } else {
            this.$message.error(res.message)
          }
        })
      },
      convertToTreeSelect(data) {
        return data.map((item) => {
          const title = item.typeName + '(' + item.typeCode + ')' || item.title || '未知标题'
          // 创建基本节点
          const node = {
            key: item.id,
            // value: item.id,
            title: title,
          }
          // 如果有子节点，递归处理
          if (item.subTypes && item.subTypes.length > 0) {
            node.children = this.convertToTreeSelect(item.subTypes)
          }
          return node
        })
      },
      // onLoadData(treeNode) {
      //   let that = this
      //   return new Promise(resolve => {
      //     if (treeNode.dataRef && treeNode.dataRef.level === 0) {
      //       getAction(this.url.listSimpleRegular, {
      //         deviceTypeId: treeNode.dataRef.key,
      //       }).then((res) => {
      //         if (res.success) {
      //           const newChildren = res.result.map((item) => {
      //             return {
      //               key: item.id,
      //               title: item.rapairRange_dictText,
      //               level: 1,
      //               isLeaf: true,
      //             }
      //           })
      //           if (newChildren.length > 0) {
      //             treeNode.dataRef.children = treeNode.dataRef.children.concat(newChildren)
      //           }
      //           resolve()
      //         }
      //       })
      //     }
      //   })
      // },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>