<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model:page="page"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      :before-open="beforeOpen"
      @on-load="onLoad"
    >
      <template #menu-left>
        <el-button type="danger" icon="el-icon-delete" @click="handleDelete"
          >删 除
        </el-button>
        <el-button type="success" icon="el-icon-upload" @click="handleImport"
          >导入
        </el-button>
      </template>
      <template #menu="scope">
        <el-button type="text" @click="setCrew(scope.row)">设置班组人员</el-button>
        <el-button type="text" @click="changeTime(scope.row, 1)">日分派时间</el-button>
        <el-button type="text" @click="changeTime(scope.row, 2)"
          >特殊日分派时间</el-button
        >
        <el-button type="text" @click="changeTime(scope.row, 3)">轮换时间</el-button>
      </template>
      <template #userName="{ row }">
        {{ row.teamLeader.userName }}
      </template>
      <template #planner="{ row }">
        {{ row.planner.userName }}
      </template>
      <template #dispatcher="{ row }">
        {{ row.dispatcher.userName }}
      </template>
      <template #csId="{ row }">
        {{ row.bsClassesSet.csName }}
      </template>
      <template #csId-form="{ type }">
        <span v-show="type == 'edit' || type == 'add'">
          <el-select v-model="form.bsClassesSet.csId" placeholder="请选择班次">
            <el-option
              v-for="item in csData"
              :key="item.csId"
              :value="item.csId"
              :label="item.csName"
            ></el-option>
          </el-select>
        </span>
      </template>
      <template #userName-form="{ type }">
        <span v-show="type == 'edit' || type == 'add'">
          <el-select v-model="form.teamLeader.userId" placeholder="请选择班组长">
            <el-option
              v-for="item in userData"
              :key="item.userId"
              :value="item.userId"
              :label="item.userName"
            ></el-option>
          </el-select>
        </span>
      </template>
      <template #planner-form="{ type }">
        <span v-show="type == 'edit' || type == 'add'">
          <el-select v-model="form.planner.userId" placeholder="请选择计划员">
            <el-option
              v-for="item in userData"
              :key="item.userId"
              :value="item.userId"
              :label="item.userName"
            ></el-option>
          </el-select>
        </span>
      </template>
      <template #dispatcher-form="{ type }">
        <span v-show="type == 'edit' || type == 'add'">
          <el-select v-model="form.dispatcher.userId" placeholder="请选择调度员">
            <el-option
              v-for="item in userData"
              :key="item.userId"
              :value="item.userId"
              :label="item.userName"
            ></el-option>
          </el-select>
        </span>
      </template>
    </avue-crud>
    <el-dialog title="设置人员" append-to-body v-model="crewDialog" width="40%">
      <el-transfer
        v-model="crewData"
        filterable
        :data="data"
        :titles="['未选择', '已选择']"
      />
    </el-dialog>
    <el-dialog title="时间" append-to-body v-model="timeDialog" width="60%">
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="insertEvent()"
          >插入一行</el-button
        >
        <el-button plain type="danger" @click="remove">删除选择行</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
      <div style="margin-top: 20px">
        <el-table
          :data="timeList"
          @selection-change="selectionChangeProject"
          @select="selectChange"
        >
          <el-table-column type="selection" width="55px"></el-table-column>
          <el-table-column align="center" label="开始时间">
            <template #default="scope">
              <el-time-select
                v-model="scope.row.startTime"
                start="00:00"
                step="00:15"
                end="24:00"
                placeholder="选择时间"
              >
              </el-time-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="结束时间">
            <template #default="scope">
              <el-time-select
                v-model="scope.row.endTime"
                start="00:00"
                step="00:15"
                end="24:00"
                placeholder="选择时间"
              >
              </el-time-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 导入 -->
    <basic-import v-if="isShowImport" title="导入" :isShow="isShowImport"
      templateUrl="/blade-desk/QA/CycleTestItem/download-excel-template"
      templateName="试验项目模板.xlsx"
      importUrl="/blade-desk/QA/CycleTestItem/import-excel"
     @closeDialog="closeDialog"></basic-import>

  </basic-container>
</template>

<script>
import basicImport from '@/components/basic-import/main.vue'
export default {
  components: {
    basicImport,
  },
  data() {
    return {
      isShowImport:false,
      data: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      timeList: [],
      deleteTidArr: [], //删除数据
      form: {
        bsClassesSet: {
          csName: "",
          csId: null,
        },
        teamLeader: {
          userId: null,
        },
        planner: {
          userId: null,
          userName: "",
        },
        dispatcher: {
          userId: null,
          userName: "",
        },
      },
      crewDialog: false,
      timeDialog: false,
      csData: [
        {
          csId: 18,
          csName: "白班",
          keyValue: 18,
        },
        {
          csId: 19,
          csName: "晚班",
          keyValue: 19,
        },
      ],
      crewData: [], //班组人员数据
      userData: [
        {
          jobName: "软件工程师",
          deptName: "MES开发部",
          ldapName: null,
          userSex: 1,
          deptId: 1,
          mobile: null,
          userName: "测试",
          userId: 521,
          userCode: "0001",
        },
        {
          jobName: null,
          deptName: "MES开发部",
          ldapName: "jinna",
          userSex: 2,
          deptId: 1,
          mobile: null,
          userName: "靳娜",
          userId: 21,
          userCode: "jinna",
        },
        {
          jobName: null,
          deptName: "MES开发部",
          ldapName: "zd001",
          userSex: 1,
          deptId: 1,
          mobile: null,
          userName: "张迪",
          userId: 601,
          userCode: "zd001",
        },
      ],
      query: {},
      loading: true,
      excelBox: false,
      option: {
        tip: false,
        height: "auto",
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        delBtn: false,
        editBtnText: "修改",
        viewBtnText: "详情",
        labelWidth: 120,
        menuWidth: 480,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        filterBtn: true,
        searchShowBtn: false,
        excelBtn: true,
        showOverflowTooltip: true,
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "left",
        gridBtn: false,
        searchMenuPosition: "right",
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        align: "center",
        column: [
          {
            label: "编码",
            prop: "tsCode",
            search: true,
            sortable: true,
            filter: true,
            span: 24,
            width: 150,
            rules: [
              {
                required: true,
                message: "请输入编码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "名称",
            prop: "tsName",
            sortable: true,
            filter: true,
            span: 24,
            width: 150,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "班组长",
            prop: "userName",
            search: false,
            type: "select",
            sortable: true,
            filter: true,
            span: 24,
            width: 150,
            rules: [
              {
                required: true,
                message: "请选择班组长",
                trigger: "blur",
              },
            ],
            props: {
              label: "userName",
              value: "userId",
            },
            dicData: [
              {
                jobName: "软件工程师",
                deptName: "MES开发部",
                ldapName: null,
                userSex: 1,
                deptId: 1,
                mobile: null,
                userName: "测试",
                userId: 521,
                userCode: "0001",
              },
              {
                jobName: null,
                deptName: "MES开发部",
                ldapName: "jinna",
                userSex: 2,
                deptId: 1,
                mobile: null,
                userName: "靳娜",
                userId: 21,
                userCode: "jinna",
              },
              {
                jobName: null,
                deptName: "MES开发部",
                ldapName: "zd001",
                userSex: 1,
                deptId: 1,
                mobile: null,
                userName: "张迪",
                userId: 601,
                userCode: "zd001",
              },
            ],
          },
          {
            label: "计划员",
            prop: "planner",
            search: false,
            sortable: true,
            filter: true,
            type: "select",
            span: 24,
            width: 150,
            rules: [
              {
                required: true,
                message: "请选择计划员",
                trigger: "blur",
              },
            ],
            props: {
              label: "userName",
              value: "userId",
            },
            dicData: [
              {
                jobName: "软件工程师",
                deptName: "MES开发部",
                ldapName: null,
                userSex: 1,
                deptId: 1,
                mobile: null,
                userName: "测试",
                userId: 521,
                userCode: "0001",
              },
              {
                jobName: null,
                deptName: "MES开发部",
                ldapName: "jinna",
                userSex: 2,
                deptId: 1,
                mobile: null,
                userName: "靳娜",
                userId: 21,
                userCode: "jinna",
              },
              {
                jobName: null,
                deptName: "MES开发部",
                ldapName: "zd001",
                userSex: 1,
                deptId: 1,
                mobile: null,
                userName: "张迪",
                userId: 601,
                userCode: "zd001",
              },
            ],
          },
          {
            label: "调度员",
            prop: "dispatcher",
            search: true,
            sortable: true,
            filter: true,
            type: "select",
            span: 24,
            width: 150,
            rules: [
              {
                required: true,
                message: "请选择调度员",
                trigger: "blur",
              },
            ],
            props: {
              label: "userName",
              value: "userId",
            },
            dicData: [
              {
                jobName: "软件工程师",
                deptName: "MES开发部",
                ldapName: null,
                userSex: 1,
                deptId: 1,
                mobile: null,
                userName: "测试",
                userId: 521,
                userCode: "0001",
              },
              {
                jobName: null,
                deptName: "MES开发部",
                ldapName: "jinna",
                userSex: 2,
                deptId: 1,
                mobile: null,
                userName: "靳娜",
                userId: 21,
                userCode: "jinna",
              },
              {
                jobName: null,
                deptName: "MES开发部",
                ldapName: "zd001",
                userSex: 1,
                deptId: 1,
                mobile: null,
                userName: "张迪",
                userId: 601,
                userCode: "zd001",
              },
            ],
          },
          {
            label: "班组人员",
            prop: "teamMember",
            search: false,
            sortable: true,
            filter: true,
            editDisplay: false,
            addDisplay: false,
            span: 24,
            width: 150,
            rules: [
              {
                required: true,
                message: "请选择班组人员",
                trigger: "blur",
              },
            ],
          },
          {
            label: "班次",
            prop: "csId",
            search: false,
            type: "select",
            sortable: true,
            filter: true,
            span: 24,
            width: 150,
            props: {
              label: "csName",
              value: "csId",
            },
            dicData: [
              {
                csId: 18,
                csName: "白班",
                keyValue: 18,
              },
              {
                csId: 19,
                csName: "晚班",
                keyValue: 19,
              },
            ],
          },
          {
            label: "类型分类",
            prop: "tsType",
            search: false,
            type: "select",
            sortable: true,
            filter: true,
            span: 24,
            width: 150,
            dicData: [
              {
                value: 1,
                label: "针孔",
              },
              {
                value: 2,
                label: "壳体",
              },
              {
                value: 3,
                label: "烧结",
              },
              {
                value: 4,
                label: "园区",
              },
            ],
          },
          {
            label: "日分派时间",
            prop: "dayPutDueTime",
            search: false,
            sortable: true,
            editDisplay: false,
            filter: true,
            addDisplay: false,
            span: 24,
            width: 150,
            rules: [
              {
                required: true,
                message: "请输入日分派时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "特殊日分派时间",
            prop: "specDayPutDueTime",
            search: false,
            sortable: true,
            editDisplay: false,
            filter: true,
            addDisplay: false,
            span: 24,
            width: 150,
            rules: [
              {
                required: true,
                message: "请输入特殊日分派时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "轮换时间",
            prop: "exChangeTime",
            search: false,
            sortable: true,
            editDisplay: false,
            filter: true,
            addDisplay: false,
            span: 24,
            width: 150,
            rules: [
              {
                required: true,
                message: "请输入轮换时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "特殊",
            prop: "special",
            search: false,
            type: "select",
            sortable: true,
            filter: true,
            span: 24,
            width: 150,
            dicData: [
              {
                value: 1,
                label: "是",
              },
              {
                value: 0,
                label: "否",
              },
            ],
          },
        ],
      },
      selectionList: [],
    };
  },
  mounted() {},
  methods: {
    // 点击导入按钮
    handleImport() {
      this.isShowImport = true
    },
    // 多选
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    rowUpdate(row, index, done, loading) {},
    rowSave(row, done, loading) {},
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    rowDel(row, index, done) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {});
    },
    // 设置时间
    changeTime(row, val) {
      this.timeList = [];
      // if(val == 1){
      this.timeList = [
        { startTime: "00:00", endTime: "00:15", _select: false },
        { startTime: "00:15", endTime: "00:20", _select: false },
        { startTime: "00:45", endTime: "01:00", _select: false },
      ];
      this.timeDialog = true;
      // }
    },
    // 插入一行
    insertEvent() {
      const record = { _select: false };
      this.timeList.push(record);
    },
    //删除所选行
    remove() {
      let arr = this.tidList.filter((item) => item._select);
      if (arr.length != 0) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          if (this.rowId) {
            let deleteData = this.timeList.filter((item) => item._select);
            this.deleteTidArr = deleteData.filter((item) => item.tidId);
          }
          let deleteArr = this.timeList.filter((item) => !item._select);
          this.timeList = deleteArr;
        });
      } else {
        this.$message.error("请至少选择一条数据进行操作！");
      }
    },
    // 点击保存按钮
    handleSave() {
      if (this.timeList.length == 0) {
        this.$message.error("请至少填写一条数据");
      } else {
        let tmp = this.timeList.find((item) => item.startTime && item.endTime);
        if (!tmp) {
          this.$message.error("数据请填写完整!");
        }
      }
    },
    // 设置班组人员
    setCrew(row) {
      this.crewDialog = true;
    },
    // 打开前回调
    beforeOpen(done, type, loading) {
      if (type == "add") {
        this.form = {
          bsClassesSet: {
            csName: "",
            csId: null,
          },
          teamLeader: {
            userId: null,
          },
          planner: {
            userId: null,
            userName: "",
          },
          dispatcher: {
            userId: null,
            userName: "",
          },
        };
      }
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad() {
      this.loading = true;
      this.data = [
        {
          id: "1",
          tsCode: "045",
          tsName: "玻璃烧结班组",
          teamLeader: {
            userName: "测试",
            userId: 521,
          },
          planner: {
            userId: 521,
            userName: "测试",
          },
          dispatcher: {
            userId: 521,
            userName: "测试",
          },
          teamMember: "崔殿龙",
          bsClassesSet: {
            csId: 18,
            csName: "早班",
          },
          tsType: 1,
          tsTypeTitle: "针孔",
          dayPutDueTime: "00:00~00:00、00:45~00:45、00:15~00:00",
          specDayPutDueTime: "10:00~19:00",
          exChangeTime: "00:00~00:15",
          special: 1,
          specialTitle: "是",
        },
        {
          id: "2",
          tsCode: "044",
          tsName: "玻璃烧结班组",
          teamLeader: {
            userName: "测试",
            userId: 521,
          },
          planner: {
            userId: 521,
            userName: "测试",
          },
          dispatcher: {
            userId: 521,
            userName: "测试",
          },
          teamMember: "崔殿龙",
          bsClassesSet: {
            csId: 18,
            csName: "早班",
          },
          tsType: 1,
          tsTypeTitle: "针孔",
          dayPutDueTime: "00:00~00:00、00:45~00:45、00:15~00:00",
          specDayPutDueTime: "10:00~19:00",
          exChangeTime: "00:00~00:15",
          special: 1,
          specialTitle: "是",
        },
        {
          id: "3",
          tsCode: "023",
          tsName: "玻璃烧结班组",
          teamLeader: {
            userName: "测试",
            userId: 521,
          },
          planner: {
            userId: 521,
            userName: "测试",
          },
          dispatcher: {
            userId: 521,
            userName: "测试",
          },
          teamMember: "崔殿龙",
          bsClassesSet: {
            csId: 18,
            csName: "早班",
          },
          tsType: 1,
          tsTypeTitle: "针孔",
          dayPutDueTime: "00:00~00:00、00:45~00:45、00:15~00:00",
          specDayPutDueTime: "10:00~19:00",
          exChangeTime: "00:00~00:15",
          special: 1,
          specialTitle: "是",
        },
        {
          id: "4",
          tsCode: "024",
          tsName: "玻璃烧结班组",
          teamLeader: {
            userName: "测试",
            userId: 521,
          },
          planner: {
            userId: 521,
            userName: "测试",
          },
          dispatcher: {
            userId: 521,
            userName: "测试",
          },
          teamMember: "崔殿龙",
          bsClassesSet: {
            csId: 18,
            csName: "早班",
          },
          tsType: 1,
          tsTypeTitle: "针孔",
          dayPutDueTime: "00:00~00:00、00:45~00:45、00:15~00:00",
          specDayPutDueTime: "10:00~19:00",
          exChangeTime: "00:00~00:15",
          special: 1,
          specialTitle: "是",
        },
        {
          id: "5",
          tsCode: "025",
          tsName: "玻璃烧结班组",
          teamLeader: {
            userName: "测试",
            userId: 521,
          },
          planner: {
            userId: 521,
            userName: "测试",
          },
          dispatcher: {
            userId: 521,
            userName: "测试",
          },
          teamMember: "崔殿龙",
          bsClassesSet: {
            csId: 18,
            csName: "早班",
          },
          tsType: 1,
          tsTypeTitle: "针孔",
          dayPutDueTime: "00:00~00:00、00:45~00:45、00:15~00:00",
          specDayPutDueTime: "10:00~19:00",
          exChangeTime: "00:00~00:15",
          special: 1,
          specialTitle: "是",
        },
      ];
      this.page.total = this.data.length;
      this.loading = false;
      setTimeout(() => {
        this.selectionClear();
      }, 500);
    },
  },
};
</script>

<style></style>
