<template>
  <ele-modal
    width="80%"
    :visible="visible"
    v-if="visible"
    :append-to-body="true"
    custom-class="ele-dialog-form"
    :title="dialogTitle"
    @update:visible="updateVisible"
  >
    <header-title title="基本信息"></header-title>
    <el-form
      ref="addFormRef"
      :model="addForm"
      :rules="addFormRules"
      label-width="120px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="计划配置单号" prop="code">
            <el-input
              v-model="addForm.code"
              size="small"
              placeholder="自动带出"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="计划配置名称" prop="name">
            <el-input
              v-model="addForm.name"
              size="small"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="自动派单" prop="autoOrder">
            <el-select
              v-model="addForm.autoOrder"
              size="small"
              style="width: 100%"
              @change="autoOrderChange"
            >
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="计划开始时间" prop="startTime">
            <el-date-picker
              style="width: 100%"
              v-model="addForm.planStartTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择计划开始时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="计划结束时间" prop="endTime">
            <el-date-picker
              style="width: 100%"
              v-model="addForm.planEndTime"
              @change="endTimeRules"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择计划结束时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审核部门" prop="approvalUserId">
            <deptSelect
              v-model="addForm.approvalDepId"
              @changeGroup="searchDeptNodeClick"
              :disabled="isBindPlan"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审核人" prop="approvalUserId">
            <el-select
              v-model="addForm.approvalUserId"
              size="small"
              clearable
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in executorList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="计划完成时长" prop="duration">
            <div style="display: flex">
              <el-input
                type="number"
                :disabled="dialogTitle === '派单'"
                v-model="addForm.duration"
                size="small"
                placeholder="请输入"
                @input="formDataDurationTime"
              >
                <template #suffix>分钟</template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>

        <el-col
          :span="8"
          v-if="addForm.autoOrder && !dialogTitle.includes('量具送检')"
        >
          <el-form-item label="部门" prop="groupId">
            <deptSelect
              v-model="addForm.groupId"
              @changeGroup="searchDeptNodeClick"
              :disabled="isBindPlan"
            />
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          v-if="addForm.autoOrder && !dialogTitle.includes('量具送检')"
        >
          <el-form-item label="负责人" prop="executeId">
            <el-select
              v-model="addForm.executeId"
              size="small"
              style="width: 100%"
              :disabled="isBindPlan"
              multiple
              filterable
            >
              <el-option
                v-for="item in executorList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="!dialogTitle.includes('量具送检')">
          <el-form-item label="审核人" prop="approvalUserId">
            <el-select
              :disabled="dialogTitle === '派单'"
              v-model="addForm.approvalUserId"
              size="small"
              clearable
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in uerList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急程度" prop="urgent">
            <DictSelection
              dictName="紧急程度"
              clearable
              v-model="addForm.urgent"
              :disabled="dialogTitle === '派单'"
            >
            </DictSelection>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="addForm.status"
              active-text="开"
              inactive-text="关"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="16">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              resize="none"
              v-model="addForm.remark"
              :rows="2"
              placeholder="请详细说明"
              size="small"
              :disabled="dialogTitle === '派单'"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="el-tab_box">
        <div class="equipmentList_box">
          <header-title title="设备列表">
            <div>
              <el-button
                size="small"
                icon="el-icon-plus"
                class="ele-btn-icon"
                type="primary"
                @click="
                  handleAdd(ruleIdList, ruleIdListIndex, true, equipmentList)
                "
                >新增</el-button
              >
            </div>
          </header-title>
          <el-table :data="equipmentList" border>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column label="设备名称" align="center" prop="name">
              <template slot-scope="{ row, $index }">
                <template>
                  {{ row.name }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="编号" align="center" prop="codeNumber">
              <template slot-scope="{ row, $index }">
                <template>
                  {{ row.codeNumber }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="固资编码" align="center" prop="fixCode">
              <template slot-scope="{ row, $index }">
                <template>
                  {{ row.fixCode }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="deleteEquipment(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div class="ruleMatters_box">
          <header-title title="备品备件">
            <div v-if="dialogTitle !== '派单'">
              <el-button
                size="small"
                icon="el-icon-plus"
                class="ele-btn-icon"
                type="primary"
                @click="addPostscript"
                >新增</el-button
              >
            </div>
          </header-title>
          <el-table :data="equipmentList" border>
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="事项" prop="name" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.isNew">
                  <el-input
                    v-model="scope.row.name"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
                <div v-else>
                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="内容" prop="content" width="200">
              <template slot-scope="scope">
                <div v-if="scope.row.isNew">
                  <el-input
                    v-model="scope.row.content"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
                <div v-else>
                  <span>{{ scope.row.content }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作指导" prop="operationGuide">
              <template slot-scope="scope">
                <div
                  class="operationGuide_box"
                  @click="
                    openOperationGuideDialogDialog(
                      scope.row.operationGuide,
                      scope.$index
                    )
                  "
                >
                  <div class="left_content">
                    <template v-if="scope.row.operationGuide">
                      <div
                        v-for="(item, index) in scope.row.operationGuide
                          .toolList"
                        :key="item.id"
                        >{{ index + 1 }}.{{ item.name }}</div
                      >
                    </template>
                  </div>
                  <div class="right_content">
                    <template v-if="scope.row.operationGuide">
                      <div
                        v-for="(item, index) in scope.row.operationGuide
                          .procedureList"
                        :key="item.id"
                        >{{ index + 1 }}.{{ item.content }}</div
                      >
                    </template>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="标准" prop="norm" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.isNew">
                  <el-input
                    v-model="scope.row.norm"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
                <div v-else>
                  <span>{{ scope.row.norm }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="dialogTitle !== '派单'"
              label="操作"
              width="100"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="deleteItem(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div> -->
      </div>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="save"> 保存</el-button>
    </template>
    <!-- 新增设备 -->
    <MaterialAdd ref="productRefs" @chooseEquipment="chooseEquipment">
    </MaterialAdd>
  </ele-modal>
</template>

<script>
  import { getDetail, getCode } from '@/api/ruleManagement/matter';
  import {
    getRule,
    getCategory,
    getAssetList,
    getInfoById
  } from '@/api/ruleManagement/plan';
  import { saveOrUpdate } from '@/api/maintenance/patrol_maintenance';
  import { getUserPage } from '@/api/system/organization';
  import { getTreeByType } from '@/api/classifyManage';
  import MaterialAdd from './MaterialAdd.vue';
  import OperationGuideDialog from './operationGuideDialog.vue';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import { pageList } from '@/api/technology/version/version.js';
  import { getById } from '@/api/maintenance/patrol_maintenance';
  import { getFile } from '@/api/system/file';
  import { deepClone } from 'ele-admin/lib/utils/core';
  import { data } from 'ele-admin/lib/ele-pro-table';

  export default {
    components: {
      MaterialAdd,
      deptSelect,
      OperationGuideDialog
    },
    props: {
      dialogTitle: {
        type: String,
        default: () => {
          return '新增巡检点计划配置';
        }
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      const defaultForm = {
        id: null,
        code: '',
        name: '',
        modelType: '',
        brandNum: '',
        specification: '',
        measuringUnit: '',

        bomList: []
      };
      return {
        ruleIndex: 0, // 规则index
        ruleId: '',
        formLabel: '',
        isBindPlan: false,
        equipmentList: [],
        ruleObj: {
          ruleId: '',
          name: '',
          code: '',
          equipmentList: []
        },
        ruleIdList: [],
        addForm: {
          id: '',
          code: '', // 计划配置单号
          name: '', // 计划配置名称
          autoOrder: 1, // 自动派单
          ruleId: '', // 规则id
          ruleName: '', // 规则名称
          duration: null, // 计划完成时长
          categoryId: '', // 设备类别id
          approvalUserId: '', // 审核人id
          groupId: '', // 巡点检部门code
          executeId: [], // 巡点检人员id
          executorPhone: '',
          status: 1, // 状态
          remark: '', // 备注
          urgent: '1'
        },
        ruleNameList: [], // 规则列表
        uerList: [], // 审核人列表
        executorList: [], // 业务人员列表
        defaultForm,
        // 表单数据
        form: {
          ...defaultForm
        },

        versionList: [],

        // 表单验证规则
        addFormRules: {
          name: [
            { required: true, message: '请输入计划配置名称', trigger: 'blur' }
          ],
          autoOrder: [
            { required: true, message: '请选择是否自动派单', trigger: 'change' }
          ],
          ruleId: [
            { required: true, message: '请选择规则名称', trigger: 'change' }
          ],
          duration: [
            { required: true, message: '请输入计划完成时长', trigger: 'blur' }
          ],
          categoryLevelId: [
            { required: true, message: '请选择设备分类', trigger: 'change' }
          ],
          categoryId: [
            { required: true, message: '请选择设备类别', trigger: 'change' }
          ],
          groupId: [
            { required: true, message: '请选择巡点检部门', trigger: 'change' }
          ],
          executeId: [
            { required: true, message: '请选择巡点检人员', trigger: 'change' }
          ],
          urgent: [
            { required: true, message: '请选择紧急程度', trigger: 'change' }
          ]
        },

        columns: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '子项编号',
            prop: 'subCode',
            action: 'subCode'
          },
          {
            label: '物料名称',
            prop: 'categoryName',
            action: 'categoryName'
          },

          {
            label: '是否回收料',
            prop: 'isReworkBom',
            action: 'isReworkBom',
            slot: 'isReworkBom',
            width: 95
          },

          {
            label: '物料编码',
            prop: 'categoryCode'
          },
          {
            label: '牌号',
            prop: 'brandNum'
          },
          {
            label: '型号',
            prop: 'modelType'
          },
          {
            label: '数量',
            prop: 'count'
          },
          {
            label: '计量单位',
            prop: 'unit'
          },

          {
            label: '附件',
            slot: 'bomArtFiles',
            action: 'bomArtFiles',
            minWidth: 100
          },

          {
            label: '单位',
            prop: 'weightUnit'
          },

          {
            label: '备注',
            prop: 'remark'
          }
        ],

        statusList: [
          { label: '草稿', value: -1 },
          { label: '失效', value: 0 },
          { label: '生效', value: 1 }
        ],

        // 提交状态
        loading: false,

        categoryId: null,

        current: null,

        materialShow: false,

        tabsList: [],
        tableData: [],

        taskId: null,

        addDialog: false,
        tabsValue: null
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    watch: {
      visible(val) {
        if (val) {
          // 获取审核人列表数据
          this.getUserList();
        }
      }
    },
    methods: {
      // 限制结束时间
      endTimeRules() {
        if (this.addForm.planStartTime) {
          console.log(this.addForm.planStartTime);
          console.log(new Date(this.addForm.planStartTime).getTime());
          let differenceTime =
            new Date(this.addForm.planEndTime).getTime() -
            new Date(this.addForm.planStartTime).getTime();
          if (differenceTime <= 0) {
            this.$message.error('请选择正确的计划开始时间');
            this.addForm.planEndTime = '';
          }
        } else {
          this.$message.error('请选择正确的计划开始时间');
          this.addForm.planEndTime = '';
        }
      },
      // 初始化
      async init(row, tips) {
        if (row) {
          this.getInfo(row.id, tips);
        } else {
          //  获取计划配置单号
          this.getOrderCode(tips);
          this.addForm = {
            code: '', // 计划配置单号
            name: '', // 计划配置名称
            autoOrder: 1, // 自动派单
            ruleId: '', // 规则id
            ruleName: '', // 规则名称
            duration: null, // 计划完成时长
            categoryId: '', // 设备类别id
            approvalUserId: '', // 审核人id
            groupId: '', // 巡点检部门code
            executeId: [], // 巡点检人员id
            executorPhone: '',
            status: 1, // 状态
            remark: '', // 备注
            urgent: '1'
          };
          this.equipmentList = [];
          this.ruleIdList = [];
          this.isBindPlan = false;
          this.planRuleEquiList = [];
          //   this.matterRulesList = [];
        }
        this.formLabel = '计划性维修';
        const typeOptions = {
          巡点检: 1,
          保养: 2,
          维修: 3,
          计划性维修: 4,
          量具送检: 5
        };
        this.addForm.type = typeOptions[this.formLabel];
        // const planRuleTypeObj = {
        //   巡点检: 'PATROL',
        //   保养: 'MAINTAIN',
        //   量具送检: '',
        //   盘点: 'INVENTORY'
        // };
        // this.addForm.planType = planRuleTypeObj[this.formLabel];
      },
      autoOrderChange(val) {
        if (val == 0) {
          this.addForm.executeId = '';
          this.addForm.groupId = '';
        }
      },
      ruleChange(item) {
        this.ruleObj.name = item.name;
        this.ruleObj.code = item.code;
      },
      save() {
        console.log(this.addForm);
        this.$refs.addFormRef.validate(async (valid) => {
          console.log(valid);
          console.log(this.equipmentList, 'this.equipmentList');
          if (valid) {
            const planDeviceList = this.equipmentList.map((item) => {
              return {
                deviceId: item.id,
                codeNumber: item.codeNumber,
                equiLocation: item.position[0]?.pathName,
                equiLocationCode: item.position[0]?.pathIds,
                repairUserId: item.repairUserId,
                workItems: []
              };
            });
            let boolen = planDeviceList.length > 0;
            if (!boolen) {
              this.$message.error('请添加设备！');
              return false;
            }
            let sendMsg = [
              {
                ...this.addForm,
                planDeviceList: planDeviceList,
                executorId:
                  planDeviceList.length > 0
                    ? planDeviceList.map((item) => item.repairUserId).join(',')
                    : ''
              }
            ];
            let type = this.dialogTitle.includes('新增') ? '新增' : '编辑';
            try {
              let res = await saveOrUpdate(sendMsg);
              if (res) {
                this.$message.success(type + '成功！');
                this.visible = false;
                this.$emit('done');
              }
            } catch (error) {
              this.$message.error(type + '失败！');
            }
          }
        });
      },
      deleteEquipment(index) {
        this.equipmentList.splice(index, 1);
      },
      async getInfo(id, tips) {
        console.log(id);
        try {
          const res = await getById(id);
          console.log('res----------', res);
          this.addForm = res.data;
          this.addForm.id = res.data.planId;
          if (this.dialogTitle === '派单') {
            this.addForm.autoOrder = 1;
          }
          this.isBindPlan = res.isBindPlan;
          // this.categoryEquipment(res.categoryLevelId);
          this.ruleIdList = [
            {
              id: res.data.id,
              ruleId: res.data.ruleId,
              name: res.data.name,
              code: res.data.code,
              categoryId: res.data.categoryId,
              equipmentList: res.data.planDeviceList.map((item) => {
                return {
                  name: item.substance.name,
                  position: item.substance.position,
                  id: item.substance.id,
                  fixCode: item.substance.fixCode,
                  codeNumber: item.substance.codeNumber
                  // category: {
                  //   categoryLevelId: item.categoryId,
                  //   categoryLevelName: item.categoryName
                  // }
                };
              }),
              ruleItems: res.data.planDeviceList[0].workItems
            }
          ];
          console.log(this.ruleIdList);
          this.tabsValue = this.ruleIdList[0].ruleId;
          // const params = { groupId: res.data.groupId };
          // this.getUserList(params);
          // this._getMatterRulesDetails(res.ruleId);
          this.$set(this.addForm, 'code', res.data.code);
          this.$set(this.addForm, 'urgent', JSON.stringify(res.data.urgent));
          this.$set(this.addForm, 'executeId', res.data.executeId.split(','));
          this.$set(this.addForm, 'imageUrl', {});
          console.log(this.rootData);
        } catch (error) {
          console.log(error);
        }
      },
      // 获取设备分类数据
      async categoryEquipment(id) {
        const params = { categoryLevelId: id, pageNum: 1, size: -1 };
        console.log('params==', params);
        const data = await getCategory(params);
        console.log(data);
        this.equipmentList = data.list;
      },
      // 选择设备
      chooseEquipment(data) {
        console.log(data);
        this.equipmentList = this.equipmentList.concat(data);
      },
      // 获取计划配置单号
      async getOrderCode(tips) {
        if (tips.includes('计划性维修')) {
          const code = await getCode('repair_plan_code');
          this.$set(this.addForm, 'code', code);
        }
      },
      // 选择审核部门
      searchDeptNodeClick(info, data) {
        if (info) {
          // 根据部门获取人员
          this.addForm.approvalUserName = data.name;
          const params = { groupId: info };
          this.getUserList(params);
        } else {
          this.addForm.approvalUserId = null;
          this.executorList = [];
        }
      },
      //选择部门(搜索)
      // searchDeptNodeClick(info, data) {
      //   if (info) {
      //     // 根据部门获取人员
      //     this.addForm.groupName = data.name;
      //     const params = { groupId: info };
      //     this.getUserList(params);
      //   } else {
      //     this.addForm.groupId = null;
      //   }
      // },
      // 过滤计划完成时长
      formDataDurationTime(value) {
        if (value > 0) {
          this.addForm.duration = value.replace(/^[0]+/, '');
        } else {
          this.addForm.duration = 0;
        }
      },
      // 获取审核人列表、巡点检人员
      async getUserList(params) {
        try {
          let data = { pageNum: 1, size: -1 };
          // 如果传了参数就是获取巡点检人员数据
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          console.log('res------------', res);
          if (params) {
            this.executorList = res.list;
          } else {
            this.uerList = res.list;
          }
        } catch (error) {}
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return [];
      },

      async getVersionList() {
        const res = await pageList({
          pageNum: 1,
          size: 100
        });

        this.versionList = res.list;
      },

      handleAdd(ruleIdList, ruleIdListIndex, isAlone, data) {
        this.$refs.productRefs.open(ruleIdList, ruleIdListIndex, isAlone, data);
      },

      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },

      handleAddTab() {
        this.tableData = this.tabsList;
        this.addDialog = true;
      },

      handleTab(e) {
        this.ruleIndex = e.index;
        // this.ruleIdList[e.index].ruleItems = this._getMatterRulesDetails(this.ruleId)
      },
      /*关闭选择参数*/
      closeAdd() {
        this.addDialog = false;
      },
      // 规则名称下拉触发
      handleRuleNameChange(val) {
        this.ruleId = val;
        console.log('val----', val);
        // this._getMatterRulesDetails(val);
      },
      // 封装 - 获取规则下面的详情数据及事项
      async _getMatterRulesDetails(val) {
        const res = await getDetail(val);
        return res.ruleItems;
        // console.log('res------', res);
        // this.matterRulesList = res.ruleItems;
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  ::v-deep .el-tab_box {
    display: flex;
    margin-top: 10px;
    height: 300px;
    width: 100%;
    .equipmentList_box {
      flex: 1;
      height: 100%;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      .divider {
        flex: 0 0 50px;
        .title {
          height: 35px;
        }
      }
      .el-table {
        overflow: auto;
      }
    }
    .ruleMatters_box {
      flex: 3;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .divider {
        flex: 0 0 50px;
        .title {
          height: 35px;
        }
      }
      .el-table {
        overflow: auto;
        .operationGuide_box {
          width: 100%;
          height: 50px;
          display: flex;
          overflow: hidden;
          cursor: pointer;
          .left_content {
            flex: 0 0 200px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #c0c4cc;
            border-radius: 10px;
            margin-right: 10px;
            overflow-y: auto;
          }
          .right_content {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #c0c4cc;
            border-radius: 10px;
            overflow-y: auto;
          }
        }
      }
      .el-table::before {
        display: none;
      }
    }
  }
</style>
