<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-select
        size="medium"
        v-model="workerInfo.devSn"
        @change="getWorkerList"
      >
        <el-option
          v-for="item in devList"
          :key="item.devSn"
          :label="item.laboratoryName"
          :value="item.devSn"
        >
        </el-option>
      </el-select>
      <el-button
        style="margin-left: 15px"
        size="medium"
        type="primary"
        @click="addBefore"
        >{{ $t("message.markRoomOverview.addSample") }}
      </el-button>
    </div>
    <div class="table_wrap whiteBlock">
      <vue-scroll>
        <el-table
          class="tables"
          :data="workerList"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'list', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            type="index"
            width="50"
            align="center"
            :label="$t('message.personnelPosition.beaconManage.table.index')"
          ></el-table-column>
          <el-table-column
            prop="sampleNo"
            :label="$t('message.markRoomOverview.sampleNo')"
          ></el-table-column>
          <el-table-column
            prop="curingPeriod"
            :label="$t('message.markRoomOverview.maintenCycle')"
          ></el-table-column>
          <el-table-column
            prop="sampleTypeName"
            :label="$t('message.markRoomOverview.sampleType')"
          ></el-table-column>
          <el-table-column
            prop="sampleNum"
            :label="$t('message.markRoomOverview.sampleNum')"
          ></el-table-column>
          <el-table-column
            prop="locationName"
            :label="$t('message.markRoomOverview.location')"
          >
            <template slot-scope="scope">
                {{scope.row.locationName}}{{scope.row.secondLocationName?'>':''}}{{scope.row.secondLocationName}}
            </template>
          </el-table-column>
          <el-table-column
            prop="formingTime"
            :label="$t('message.markRoomOverview.finishTime')"
          ></el-table-column>
          <el-table-column width="250">
            <template slot-scope="scope">
              <div class="tableBtns">
                <!-- <div @click="editBefore(scope.row)" class="operationText">
                    <span>{{ $t("message.markRoomOverview.addSon") }}</span>
                </div> -->
                <div @click="editBefore(scope.row)" class="operationText">
                  <img
                    src="@/assets/images/icon-edit.png"
                    width="15px"
                    height="15px"
                  />
                  <span>{{ $t("message.workType.edit") }}</span>
                </div>
                <div @click="deleteBefore(scope.row)" class="operationText">
                  <img
                    src="@/assets/images/icon-delete.png"
                    width="15px"
                    height="15px"
                  />
                  <span>{{ $t("message.workType.delete") }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </vue-scroll>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      :title="$t('message.markRoomOverview.operate')[type]"
      :visible.sync="dialogVisible"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="addEditForm"
          label-width="120px"
          size="medium"
          class="dialogFormBox"
          :rules="addEditRules"
          :model="workerInfo"
        >
          <el-form-item
            :label="$t('message.markRoomOverview.sampleType')"
            prop="sampleTypeId"
          >
            <el-select v-model="workerInfo.sampleTypeId">
              <el-option
                v-for="item in sampleTypeList"
                :key="item.id"
                :label="item.sampleTypeName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.markRoomOverview.maintenCycle')"
            prop="curingPeriod"
          >
            <el-input
              v-model.number="workerInfo.curingPeriod"
              :placeholder="$t('message.workType.placeholder')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.markRoomOverview.sampleNo')"
            prop="sampleNo"
          >
            <el-input
              v-model="workerInfo.sampleNo"
              :placeholder="$t('message.workType.placeholder')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.markRoomOverview.finishTime')"
            prop="formingTime"
          >
          <!-- 选择日期时间 -->
            <el-date-picker
              v-model="workerInfo.formingTime"
              type="datetime"
              :placeholder="$t('message.projectInfo.chooseDateAndTime')"
              value-format="yyyy-MM-dd hh:mm"
            >
            </el-date-picker>
            <!-- <el-input
              v-model="workerInfo.formingTime"
              :placeholder="$t('message.workType.placeholder')"
            ></el-input> -->
          </el-form-item>
          <el-form-item
            :label="$t('message.markRoomOverview.sampleNum')"
            prop="sampleNum"
          >
            <el-input
              v-model="workerInfo.sampleNum"
              :placeholder="$t('message.workType.placeholder')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.markRoomOverview.location')"
            prop="locationId"
          >
            <el-cascader
              v-model="selectLocationArr"
              :options="sampleLocationList"
              :props="{ children: 'list', label: 'locationName', value: 'id' }"
            ></el-cascader>
          </el-form-item>
          <!-- 到期通知人 -->
          <el-form-item :label="$t('message.projectInfo.dueNotifier')">
              <el-select v-model="expireNotice" multiple
                          :placeholder="$t('message.alarmValueSet.placeholder_select')">
                  <el-option
                          v-for="item in options"
                          :key="item.userId"
                          :label="item.workerName"
                          :value="item.userId">
                  </el-option>
              </el-select>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="dialogVisible = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.personnelPosition.cancel") }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="addWorker"
              size="medium"
              >{{ $t("message.personnelPosition.determine") }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addstandardSampleRecordApi,
  editstandardSampleRecordApi,
  deletestandardSampleRecordApi,
  getstandardSampleRecordListApi,
  getstandardDevListApi,
  getstandardLocationListApi,
  getstandardSampleTypeListApi,
} from "@/assets/js/api/markingRoom";
import {
        getLaborManagementInfoList
    } from "../../../assets/js/api/environmentManage";
export default {
  mounted() {
    this.getSampleTypeList();
    this.loadDevList();
    this.getLaborManagementList()
  },
  data() {
    return {
      type: "add",
      sampleTypeList: [],
      sampleLocationList: [],
      selectLocationArr: [],
      workerInfo: {
        curingPeriod: "",
        devSn: "",
        formingTime: "",
        locationId: "",
        sampleNo: "",
        sampleNum: "",
        sampleTypeId: "",
        projectSn: this.$store.state.projectSn,
        secondLocationId:''
      },
      addEditRules: {
        sampleTypeId: [
          {
            required: true,
            message: this.$t("message.personnelPosition.mandatory"),
            trigger: "change",
          },
        ],
        curingPeriod: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur",
          },{ type: 'number', message: this.$t('message.projectManage.mustBeNumber')}
        ],
        formingTime: [
          {
            required: true,
            message: this.$t("message.personnelPosition.mandatory"),
            trigger: "blur",
          },
        ],
        sampleNo: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur",
          },
        ],
        sampleNum: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur",
          },
        ],
        locationId: [
          {
            required: true,
            message: this.$t("message.personnelPosition.mandatory"),
            trigger: "blur",
          },
        ],
      },
      devList: [],
      workerList: [],
      dialogVisible: false,
      options:[],
      expireNotice:[]
    };
  },
  methods: {
    getLaborManagementList() {
        getLaborManagementInfoList({projectSn: this.$store.state.projectSn, workerName: ''}).then(result => {
            if (result.success) {
                console.log('劳务人员', result);
                this.options = result.result;
            }
        })
    },
    getSampleTypeList() {
      getstandardSampleTypeListApi({
        projectSn: this.$store.state.projectSn,
      }).then((result) => {
        this.sampleTypeList = result.result;
      });
    },
    getSampleLocationList() {
      getstandardLocationListApi({
        projectSn: this.$store.state.projectSn,
        devSn: this.workerInfo.devSn,
      }).then((result) => {
        this.sampleLocationList = result.result;
      });
    },
    loadDevList() {
      getstandardDevListApi({ projectSn: this.$store.state.projectSn }).then(
        (result) => {
          this.devList = result.result;
          if (this.devList.length > 0) {
            this.workerInfo.devSn = this.devList[0].devSn;
            this.getSampleLocationList();
            this.getWorkerList();
          }
        }
      );
    },
    addWorker() {
      if(this.expireNotice){
          this.workerInfo.expireNotice = this.expireNotice.join(',');
      }
      if (this.type === "add") {
        if (this.selectLocationArr.length > 0) {
        //   this.$message.error("请选择存放位置");
        //   return;
            this.workerInfo.locationId = this.selectLocationArr[0];
            if(this.selectLocationArr.length>1){
                this.workerInfo.secondLocationId = this.selectLocationArr[1];
            }
        }
        this.$refs.addEditForm.validate((valid) => {
          if (valid) {
            addstandardSampleRecordApi(this.workerInfo).then((result) => {
              if (result.success) {
                // console.log("工种添加成功", result);
                this.$message.success(result.message);
                this.getWorkerList();
                this.dialogVisible = false;
              }
            });
          } else {
            return false;
          }
        });
      } else if (this.type === "edit") {
        if (this.selectLocationArr.length == 0) {
          this.$message.error(/* "请选择存放位置" */this.$t('message.projectManage.pleaseChooseSaveLocation'));
          return;
        }
        this.workerInfo.locationId = this.selectLocationArr[
          this.selectLocationArr.length - 1
        ];
        this.$refs.addEditForm.validate((valid) => {
          if (valid) {
            this.workerInfo.parentId = this.workerInfo.parentId
              ? this.workerInfo.parentId
              : 0;
            editstandardSampleRecordApi(this.workerInfo).then((result) => {
              if (result.success) {
                console.log("工种编辑成功", result);
                this.$message.success(result.message);
                this.getWorkerList();
                this.dialogVisible = false;
              }
            });
          } else {
            return false;
          }
        });
      } else if (this.type === "delete") {
        deletestandardSampleRecordApi({ id: this.workerInfo.id }).then(
          (result) => {
            if (result.success) {
              console.log("工种删除成功", result);
              this.$message.success(result.message);
              this.getWorkerList();
              this.dialogVisible = false;
            }
          }
        );
      }
    },
    PopupBefore(type, worker) {
      this.dialogVisible = true;
      this.type = type;
      this.workerInfo = JSON.parse(JSON.stringify(worker));
      this.selectLocationArr = [this.workerInfo.locationId];
      if(this.workerInfo.secondLocationId){
          this.selectLocationArr.push(this.workerInfo.secondLocationId)
      }
      if (typeof worker.expireNotice === 'string'&& worker.expireNotice != '') {
                    this.expireNotice = worker.expireNotice.split(',');
                }else{
                  this.expireNotice = []
                }
      delete this.workerInfo.addTime;
    },
    addBefore() {
      this.dialogVisible = true;
      this.type = "add";
      this.workerInfo.curingPeriod = "";
      this.workerInfo.formingTime = "";
      this.workerInfo.locationId = "";
      this.workerInfo.sampleNo = "";
      this.workerInfo.sampleNum = "";
      this.workerInfo.sampleTypeId = "";
      this.workerInfo.secondLocationId = "";
      this.expireNotice = []
      delete this.workerInfo.id;
      delete this.workerInfo.addTime;
    },
    editBefore(worker) {
      this.PopupBefore("edit", worker);
      console.log("编辑前", this.type);
    },
    deleteBefore(worker) {
      // this.PopupBefore('delete', worker);
      this.type = "delete";
      this.workerInfo = worker;
      console.log("删除前", this.type);
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          worker.locationName +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          confirmButtonText: this.$t(
            "message.personnelPosition.confirmButtonText"
          ),
          cancelButtonText: this.$t(
            "message.personnelPosition.cancelButtonText"
          ),
          type: "warning",
        }
      )
        .then(() => {
          this.addWorker();
        })
        .catch(() => {});
    },
    getWorkerList() {
      getstandardSampleRecordListApi({
        projectSn: this.$store.state.projectSn,
        devSn: this.workerInfo.devSn,
      }).then((result) => {
        if (result.success) this.workerList = result.result;
        console.log("工种列表", result);
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>