<template>
  <div class="fpdd">
    <div>
      <el-table
        v-loading="loading"
        border
        ref="et"
        :height="tableHeight1"
        :data="jiChaJiHuaResult"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="year"
          label="年度"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="batch"
          label="稽察批次"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="groupNm"
          label="组别"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="开始时间"
        >
          <template #default="scope">
            <el-date-picker
              style="width: 150px;padding: 0 0 0 30px;"
              v-model="scope.row.stTm"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始时间">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="结束时间"
        >
          <template #default="scope">
            <el-date-picker
              style="width: 150px;padding: 0 0 0 30px;"
              v-model="scope.row.enTm"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束时间">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="250"
          label="稽察地点"
          prop="areas"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="稽察项目"
          show-overflow-tooltip
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.objList.length">
                <el-icon style="cursor: pointer;" @click="objTypeClick(scope.$index, scope.row, 20)"><Plus /></el-icon>
              </div>
            </transition>
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.objList.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['workersList']&&scope.row['objList'].length?testformatterArray(scope.row['objList'],'ojbNm'):''}}</span>
                <el-icon style="margin-left: 5px; cursor: pointer;" @click="objTypeViewClick(scope.$index, scope.row, 20)"><View /></el-icon>
                <el-icon style="margin-left: 5px; cursor: pointer;" @click="objTypeClick(scope.$index, scope.row, 20)"><Edit /></el-icon>
                <el-icon style="margin-left: 5px; cursor: pointer;" @click="objTypeDelete(scope.$index, scope.row, 20)"><Delete /></el-icon>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          v-if="isJx"
          label="特派员"
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.commissioner.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['commissioner']&&scope.row['commissioner'].length?testformatterArray(scope.row['commissioner'],'name'):''}}</span>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="专家组长"
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.special.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['special']&&scope.row['special'].length?testformatterArray(scope.row['special'],'name'):''}}</span>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="助理"
          show-overflow-tooltip
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.aid.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['aid']&&scope.row['aid'].length?testformatterArray(scope.row['aid'],'name'):''}}</span>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="前期专家"
          show-overflow-tooltip
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.qqzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['qqzj']&&scope.row['qqzj'].length?testformatterArray(scope.row['qqzj'],'name'):''}}</span>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="建管专家"
          show-overflow-tooltip
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.jgzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['jgzj']&&scope.row['jgzj'].length?testformatterArray(scope.row['jgzj'],'name'):''}}</span>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="计划专家"
          show-overflow-tooltip
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.jhzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['jhzj']&&scope.row['jhzj'].length?testformatterArray(scope.row['jhzj'],'name'):''}}</span>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="财务专家"
          show-overflow-tooltip
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.cwzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['cwzj']&&scope.row['cwzj'].length?testformatterArray(scope.row['cwzj'],'name'):''}}</span>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="质量专家"
          show-overflow-tooltip
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.zlzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['zlzj']&&scope.row['zlzj'].length?testformatterArray(scope.row['zlzj'],'name'):''}}</span>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="安全专家"
          show-overflow-tooltip
        >
          <template #default="scope">
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.aqzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span style="justify-content:flex-start;">{{scope.row['aqzj']&&scope.row['aqzj'].length?testformatterArray(scope.row['aqzj'],'name'):''}}</span>
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="220"
          prop="remark"
          label="备注"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="220"
          label="检测单位"
          prop="audUnits"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="220"
          label="稽察处别"
          prop="audCategory"
        >
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 15px;">
        <el-col :span="24">
          <el-button type="primary" size="medium" @click="addNewGroup">添加新组</el-button>
          <el-button type="primary" size="medium" @click="delXzGroup">删除选中组</el-button>
          <el-button type="primary" size="medium" @click="XzGroupLoction">选中组修改地点</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px;">
        <el-col :span="12">
          <span>蓝色：历史稽察地规避失败，红色：地域规避失败，黄色：手动添加更改，粉色：被删除的人员</span>
        </el-col>
        <el-col :span="12" style="text-align: right;">
        </el-col>
      </el-row>
    </div>
    <el-dialog :close-on-click-modal="false" title="请选择要进行的操作" v-model:visible="XzRyJsVisible" width="40%" :modal-append-to-body="true" :append-to-body="true">
      <div style="text-align: center;">
        <span>请选择角色</span>
        <el-select v-model="XzJsType" clearable placeholder="请选择">
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in XzJsTypeData" :key="index"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger"  @click="XzRyJsVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="XzRyJsInfo" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <NewPersXzInfo v-if="addPersDialog" :roleTypes="roleType" :yearBatchId="yearBatchId" editAdd="editAdd" :rowData="rowData" :changeEdit="changeEdit" :changeDataList="changeDataList" @closeXzPers="closeXzPers"></NewPersXzInfo>
    <el-dialog :close-on-click-modal="false" title="请选择人员" v-model:visible="XzPersDialog" width="40%" :modal-append-to-body="true" :append-to-body="true">
      <div style="text-align: center;">
        <span>请选择人员</span>
        <el-select v-model="XzPers" clearable placeholder="请选择" multiple @change="changeDataClick" value-key="name">
          <el-option v-for="(item,index) in persListData" :label="item.name" :key="item.id" :value="item"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger"  @click="XzPersDialog = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="XzPersQd" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <!--确定稽察地点及原则-->
    <jiChaDiDian v-if="qdDdYzDialog" :yearBatchId="yearBatchId" @closeJcDdDialog="closeJcDdDialog" :changeUrl="changeUrl"></jiChaDiDian>
    <!--选中组修改地点-->
    <xuanZhongZuDiDian v-if="xZGroupDialog" :persAreaId="persAreaId" @closeXzGroupDdDialog="closeXzGroupDdDialog" :changeUrl="changeUrl" :multipleRowId="multipleRowId"></xuanZhongZuDiDian>
    <el-dialog :close-on-click-modal="false" title="请选择角色" v-model:visible="dialogRoleTypeVisible" width="40%" :modal-append-to-body="true" :append-to-body="true">
      <div style="text-align: center;">
        <span>请选择角色</span>
        <el-select v-model="roleTypeModel" clearable placeholder="请选择">
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in roleTypeData" :key="index"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger"  @click="dialogRoleTypeVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="roleTypeDetermine" size="medium">确 定</el-button>
      </div>
    </el-dialog>

    <!--稽察项目编辑-->
    <editDcdxInfo :nodeAreaList="nodeAreaList" :nodeRow="nodeRow" @closeDialog="closeDialog" v-if="editJcDialog"></editDcdxInfo>
    <!--稽察项目查看-->
    <viewDcdxInfo v-if="viewJcDialog" :groupId="groupId" @closeDialog="closeViewDialog"></viewDcdxInfo>
    <el-dialog :close-on-click-modal="false" title="请选择要删除的项目" v-model:visible="dialogObjTypeVisible" width="40%" :modal-append-to-body="true" :append-to-body="true">
      <div style="text-align: center;">
        <span>项目</span>
        <el-select v-model="objTypeModel" clearable placeholder="请选择">
          <el-option :label="item.ojbNm" :value="item.id" v-for="(item,index) in objTypeData" :key="index"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger"  @click="dialogObjTypeVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="objTypeDetermine" size="medium">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import request from '@/utils/gw_ajax_request';
import { dateFormat } from '@/utils/gw_date';
import { formatterArrayToLabel } from '@/utils/gw_formatter.js';
import { jcState } from './jcStore';
import jiChaDiDian from './jiChaDiDian';
import NewPersXzInfo from './NewPersXzInfo';
import xuanZhongZuDiDian from './xuanZhongZuDiDian';
export default {
  name: 'fenPeiDidian',
  props: [
    'distributionLocationResult',
    'persAreaId',
    'yearBatchId',
    'jiChaJiHuaResults',
  ],
  components: {
    Plus, View, Edit, Delete,
    NewPersXzInfo,
    jiChaDiDian,
    xuanZhongZuDiDian,
    editDcdxInfo: defineAsyncComponent(() => import('./editDcdxInfo_jc.vue')),
    viewDcdxInfo: defineAsyncComponent(() => import('./viewDcdxInfo_jc.vue')),
  },
  data() {
    return {
      loading: false,
      multipleSelection: [],
      jiChaJiHuaResult: [],
      tableHeight1: window.innerHeight * 0.5 - 50,
      XzRyJsVisible: false,
      XzJsType: '',
      XzJsTypeData: [
        {
          label: '添加人员',
          value: '2',
        },
        {
          label: '更换人员',
          value: '3',
        },
        {
          label: '删除人员',
          value: '4',
        },
      ],
      addPersDialog: false,
      roleType: '',
      rowData: '',
      persListData: [],
      XzPersDialog: false,
      XzPers: [],
      changeEdit: '',
      changeDataList: [],
      qdDdYzDialog: false,
      changeUrl: '',
      xZGroupDialog: false,
      dialogRoleTypeVisible: false,
      roleTypeModel: '',
      dialogObjTypeVisible: false,
      objTypeData: [],
      objTypeModel: '',
      multipleRowId: '',
      nodeAreaList: [],
      nodeRow: '',
      editJcDialog: false,
      viewJcDialog: false,
      groundId: '',
    };
  },
  mounted() {
    this.getTableListData();
  },
  computed: {
    userId: () =>
      localStorage.getItem('userid')
        ? localStorage.getItem('userid')
        : '1098101939614724096',
    roleTypeData() {
      return jcState.roleTypeData;
    },
    isJx() {
      return localStorage.getItem('currentRlcode').substring(0, 2) == '36';
    },
  },
  methods: {
    getTableListData() {
      this.$nextTick(() => {
        this.jiChaJiHuaResult = this.distributionLocationResult;
        this.jiChaJiHuaResult.forEach((item) => {
          item.stTm = item.stTm ? dateFormat(item.stTm, 'yyyy-MM-dd') : '';
          item.enTm = item.enTm ? dateFormat(item.enTm, 'yyyy-MM-dd') : '';
        });
        this.getPerFl(this.jiChaJiHuaResult);
      });
    },
    getPerFl(arr) {
      arr.forEach((element) => {
        element['qqzj'] = [];
        element['jgzj'] = [];
        element['jhzj'] = [];
        element['cwzj'] = [];
        element['zlzj'] = [];
        element['aqzj'] = [];
        element['aid'] = [];
        element['special'] = [];
        element['commissioner'] = [];
        element['workersList'].forEach((per) => {
          if (per.roleType == '11') {
            element['qqzj'].push(per);
          } else if (per.roleType == '12') {
            element['jgzj'].push(per);
          } else if (per.roleType == '13') {
            element['jhzj'].push(per);
          } else if (per.roleType == '14') {
            element['cwzj'].push(per);
          } else if (per.roleType == '15') {
            element['zlzj'].push(per);
          } else if (per.roleType == '16') {
            element['aqzj'].push(per);
          } else if (per.roleType == '19') {
            element['aid'].push(per);
          } else if (per.roleType == '20') {
            element['special'].push(per);
          } else if (per.roleType == '21') {
            element['commissioner'].push(per);
          }
        });
      });
    },
    qrJcDd() {
      this.changeUrl = 'edit';
      this.qdDdYzDialog = true;
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    handleDdEdit(index, row) {
      console.log(index, row);
    },
    handleBzEdit(index, row) {
      console.log(index, row);
    },
    roleTypeClick(index, row, value) {
      console.log(index, row, value);
      this.XzJsType = '';
      this.XzRyJsVisible = true;
      this.roleType = value;
      this.rowData = row;
    },
    objTypeClick(index, row, value) {
      console.log(index, row, value);
      if (row.areaList) {
        this.nodeAreaList = row.areaList;
      }
      this.nodeRow = row;
      this.editJcDialog = true;
    },
    objTypeViewClick(index, row, value) {
      this.groupId = row.id;
      console.log(index, row, value);
      this.viewJcDialog = true;
    },
    objTypeDelete(index, row, value) {
      this.$confirm('此操作将删除该项目所有数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        console.log(index, row, value);
        this.$nextTick(() => {
          this.objTypeData = row.objList;
          this.objTypeModel = '';
          this.dialogObjTypeVisible = true;
        });
      });
    },
    XzRyJsInfo() {
      if (this.XzJsType) {
        this.XzPers = '';
        if (this.XzJsType == '2') {
          this.changeEdit = 'add';
          this.addPersDialog = true;
        } else if (this.XzJsType == '3') {
          this.XzPersDialog = true;
          this.getPersList();
        } else if (this.XzJsType == '4') {
          this.XzPersDialog = true;
          this.getPersList();
        }
        this.XzRyJsVisible = false;
      } else {
        this.$message.warning('请选择角色');
        return;
      }
    },
    getPersList() {
      request
        .post(`/tac/worker/b/getWorkerbsListById`, {
          roleType: this.roleType,
          groupId: this.rowData.id,
        })
        .then((res) => {
          if (res.success) {
            this.persListData = res.data;
          }
        });
    },
    XzPersQd() {
      if (this.XzPers.length == '0') {
        this.$message.warning('请选择人员');
        return;
      }
      if (this.XzJsType == '3') {
        this.changeEdit = 'change';
        this.addPersDialog = true;
      } else if (this.XzJsType == '4') {
        if (this.changeDataList.length == '0') {
          this.$message.warning('请选择人员');
        } else {
          const obj = {
            updateBs: this.changeDataList,
            batchId: this.yearBatchId,
            groupNm: this.rowData.groupNm,
            groupId: this.rowData.id,
          };
          request
            .post(
              `/tac/insp/year/batch/group/pers/updateGroupPers
`,
              obj,
            )
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功');
                this.XzPersDialog = false;
                this.refreshDistributionLocation();
              } else {
                this.$message.warning(res.message);
              }
            });
        }
      }
    },
    closeJcDdDialog() {
      this.qdDdYzDialog = false;
      this.refreshDistributionLocation();
    },
    closeXzGroupDdDialog() {
      this.xZGroupDialog = false;
      this.refreshDistributionLocation();
    },
    closeXzPers() {
      this.addPersDialog = false;
      this.XzPersDialog = false;
      this.refreshDistributionLocation();
    },
    changeDataClick(item) {
      console.log(item);
      this.changeDataList = item;
    },
    testformatterArray: (
      arr,
      labelPropName,
      splitMark = ',',
      nonLabel = '',
      isAddNonLabel = true,
    ) => {
      const r = formatterArrayToLabel(
        arr,
        labelPropName,
        (splitMark = ','),
        (nonLabel = ''),
        (isAddNonLabel = true),
      );
      return r;
    },
    addNewGroup() {
      this.changeUrl = 'add';
      this.qdDdYzDialog = true;
    },
    delXzGroup() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning('请选择组');
        return;
      }
      this.$confirm('确定要删除该组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const obj = {
            groupList: this.multipleSelection,
          };
          request
            .post(`/tac/insp/year/batch/group/deleteGroupList`, obj)
            .then((res) => {
              if (res.success) {
                this.$message.success('删除成功');
                this.refreshDistributionLocation();
              } else {
                this.$message.warning(res.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            duration: 1000,
          });
        });
    },
    XzGroupLoction() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning('请选择组');
        return;
      } else if (this.multipleSelection.length > 1) {
        this.$message.warning('选中组修改地点不可多选');
        return;
      }
      this.multipleRowId = this.multipleSelection[0].id;
      this.xZGroupDialog = true;
    },
    reallocate() {
      if (this.jiChaJiHuaResult.length && this.jiChaJiHuaResults.length) {
        this.$confirm('确定要重新分配, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            request
              .post(`/tac/worker/b/distributePers`, {
                currPersId: this.userId,
                prisId: this.persAreaId,
              })
              .then((res) => {
                if (res.success) {
                  this.$message.success('重新分配成功');
                  this.refreshDistributionLocation();
                } else {
                  this.$message.error(res.message);
                }
              });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消重新分配',
              duration: 1000,
            });
          });
      } else {
        this.$message.warning('确定人选和分配地点不能为空');
      }
    },
    SingleRoleRefresh() {
      if (this.jiChaJiHuaResult.length && this.jiChaJiHuaResults.length) {
        this.dialogRoleTypeVisible = true;
      } else {
        this.$message.warning('确定人选和分配地点不能为空');
      }
    },
    roleTypeDetermine() {
      request
        .post(`/tac/worker/b/distributePers`, {
          currPersId: this.userId,
          prisId: this.persAreaId,
          roleType: this.roleTypeModel,
        })
        .then((res) => {
          if (res.success) {
            this.$message.success('单角色刷新成功');
            this.dialogRoleTypeVisible = false;
            this.refreshDistributionLocation();
          }
        });
    },
    objTypeDetermine() {
      if (this.objTypeModel) {
        request
          .post(`/tac/insp/year/batch/obj/cleanObjById`, {
            id: this.objTypeModel,
            ojbId: this.objTypeModel,
          })
          .then((res) => {
            if (res.success) {
              this.$message.success('删除成功');
              this.dialogObjTypeVisible = false;
              this.refreshDistributionLocation();
            }
          });
      } else {
        this.$message.warning('项目不能为空');
      }
    },
    refreshDistributionLocation() {
      request
        .post(`/tac/insp/year/batch/group/getGroupList`, {
          yearBatchId: this.yearBatchId,
        })
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              this.jiChaJiHuaResult = res.data;
              this.getPerFl(this.jiChaJiHuaResult);
              this.jiChaJiHuaResult.forEach((item) => {
                item.stTm = item.stTm
                  ? dateFormat(item.stTm, 'yyyy-MM-dd')
                  : '';
                item.enTm = item.enTm
                  ? dateFormat(item.enTm, 'yyyy-MM-dd')
                  : '';
                item.inTm = item.inTm
                  ? dateFormat(item.inTm, 'yyyy-MM-dd')
                  : '';
              });
            });
          }
        });
    },
    closeDialog() {
      this.editJcDialog = false;
      this.refreshDistributionLocation();
    },
    closeViewDialog() {
      this.viewJcDialog = false;
      this.refreshDistributionLocation();
    },
  },
  watch: {
    distributionLocationResult(n) {
      this.jiChaJiHuaResult = n;
      this.getTableListData();
    },
  },
};
</script>

<style>
    .selection-container {
      height:350px;
      margin:10px;
      position: relative;
      left: 50%;
      transform: translateX(-38%);
    }
    .select-box {
      width:14vw;
      height:100%;
      float:left;
      border:1px solid #ebeef5;
      border-radius:4px;
    }
    .arrows-box {
      width:110px;
      height:100%;
      float:left;
      position:relative;
    }
    .select-content {
      width:100%;
      height:310px;
      overflow-y:auto;
      overflow-x:hidden;
    }
    .select-box-title {
      height:40px;
      line-height:40px;
      font-size:16px;
      font-family:"微软雅黑";
      padding:0 6%;
      display:flex;
      align-items:center;
      position:relative;
      width:100%;
      background:#f5f7fa;
      border-bottom:1px solid #ebeef5;
      box-sizing:border-box;
      color:#000;
    }
    .arrow-btns {
      width:100%;
      position:absolute;
      top:50%;
      margin-top:-45px;
      text-align: center;
    }
    .arrows-box .el-button+.el-button {
      margin-left: 0 !important;
    }
    p.title{
      display:block;
      width:120px;
      height:30px;
      position:relative;
      top:-25px;
      text-align: center;
      background: white;
      font-size: 18px;
      color: #000;
      font-weight: bold;
    }

</style>
