<template>
<!-- 项目自检-任务列表 -->
  <div class="fullHeight">
    <div class="filterBox">
      <el-select
        v-model="searchForm.inspectTypeId"
        :placeholder="$t('message.safeMangeCheck.pleaseChoose')"
        size="medium" style="margin: 0 15px 0 0;"
      >
        <el-option
          v-for="item in checkType"
          :key="item.id"
          :label="item.inspectTypeName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <!-- <el-date-picker
        size="medium"
        style="margin: 0 15px; width: 250px"
        v-model="daterange"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd" @change="changeDate2"
      >
      </el-date-picker> -->
     <!-- 查询 -->
      <el-button type="primary" size="medium" @click="loadList">{{$t('message.safeMangeCheck.query')}}</el-button>
     <!-- 刷新 -->
      <el-button type="warning" plain size="medium" @click="refreshFn">{{$t('message.safeMangeCheck.fresh')}}</el-button>
     <!-- 新增 -->
      <el-button
        type="primary"
        size="medium"
        @click="
          dialogVisible = true;
          isAdd = true;
        "
        >{{$t('message.safeMangeCheck.add')}}</el-button
      >
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="rocordList" height="680px">
       <!-- 检查任务名称 -->
        <el-table-column
          prop="taskName"
          :label="$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.task')+$t('message.safeMangeCheck.name')" align="center"
        ></el-table-column>
        <!-- 检查类型 -->
        <el-table-column
          prop="inspectTypeName"
          :label="$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.type')" align="center"
        ></el-table-column>
        <!-- 创建人 -->
        <el-table-column prop="createUserName" :label="$t('message.safeMangeCheck.create')+$t('message.safeMangeCheck.people')" align="center"></el-table-column>
        <!-- 检查人数 -->
        <el-table-column
          prop="inspectUser"
          :label="$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.people')+$t('message.safeMangeCheck.num')"
          :formatter="parseInspectUser" align="center"
        ></el-table-column>
        <!-- 计划检查时间 -->
        <el-table-column prop="startTime" :label="$t('message.safeMangeCheck.plan')+$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.time')" width="200">
          <template slot-scope="scope">
            {{ scope.row.startTime }} 至 {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <!-- 隐患总数 -->
        <el-table-column prop="inspectNum" :label="$t('message.safeMangeCheck.hiddenDanger')+$t('message.safeMangeCheck.total')" align="center">
          <template slot-scope="scope">
            {{ scope.row.count.inspectNum }}
          </template>
        </el-table-column>
        <!-- 未闭合隐患数 -->
        <el-table-column prop="notEndNum" :label="$t('message.safeMangeCheck.notCloseNum')" align="center">
          <template slot-scope="scope">
            {{ scope.row.count.notEndNum }}
          </template>
        </el-table-column>
        <!-- 检查说明 -->
        <el-table-column prop="inspectRemark" :label="$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.dialog.explain')" align="center"></el-table-column>
        <el-table-column :label="$t('message.safeMangeCheck.operate')" align="center">
          <template slot-scope="scope">
              <div class="tableBtns">
                <!-- 详情 -->
                <div @click="detailsPoint(scope.row)" class="operationText">
                    <i
                    class="el-icon-tickets"
                    style="color: #8dacfa; font-size: 16px; margin-right: 2px"
                    ></i>
                    <span>{{$t('message.safeMangeCheck.dialog.detail')}}</span>
                </div>
              <!-- 删除 -->
                <div @click="deleteTaskFn(scope.row)" class="operationText redText last">
                    <i
                    class="el-icon-delete"
                    style="font-size: 16px; margin-right: 2px"
                    ></i>
                    <span>{{$t('message.safeMangeCheck.delete')}}</span>
                </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagerBox"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="pageTotal"
      ></el-pagination>
    </div>
    <!-- 新增任务弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="isAdd ? $t('message.safeMangeCheck.add')+$t('message.safeMangeCheck.task') : $t('message.safeMangeCheck.task')+$t('message.safeMangeCheck.dialog.detail2')"
      :visible.sync="dialogVisible"
      width="667px"
      :close-on-click-modal="false"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="addEditForm"
          ref="addEditForm"
          label-width="110px"
          class="dialogFormBox"
          :rules="addEditFormRules"
        >
        <!-- 检查类型 -->
          <el-form-item :label="$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.type')" prop="inspectTypeId">
            <el-select v-model="addEditForm.inspectTypeId" :placeholder="$t('message.safeMangeCheck.pleaseChoose')">
              <el-option
                v-for="item in checkType"
                :key="item.id + 'type'"
                :label="item.inspectTypeName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 任务名称 -->
          <el-form-item :label="$t('message.safeMangeCheck.task')+$t('message.safeMangeCheck.name')" prop="taskName">
            <el-input
              v-model="addEditForm.taskName"
              :placeholder="$t('message.safeManage.placeholder')"
            ></el-input>
          </el-form-item>
          <!-- 计划检查时间 -->
          <el-form-item :label="$t('message.safeMangeCheck.plan')+$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.time')" prop="startTime">
           <!-- 开始日期 结束日期 -->
            <el-date-picker
              style="width: 320px"
              v-model="checkDaterange"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('message.safeManage.safeRocordList.start')"
              :end-placeholder="$t('message.safeManage.safeRocordList.end')"
              value-format="yyyy-MM-dd"
              @change="changeDate"
            >
            </el-date-picker>
          </el-form-item>
          <!-- 检查频次 -->
          <el-form-item :label="$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.dialog.times')" prop="frequencyNum">
            <el-input-number
              class="smallInput"
              v-model="addEditForm.frequencyNum"
              :min="1"
              :controls="false"
            >
            </el-input-number>
            <!-- 检查频次  选择单位 -->
            <el-select
              class="smallInput"
              v-model="addEditForm.frequencyType"
              :placeholder="$t('message.safeMangeCheck.pleaseChoose')"
              style="margin-left: 12px"
            >
              <el-option
                v-for="(item, index) in frequencyType"
                :key="index + 'frequencyType'"
                :label="item"
                :value="index + 1"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 检查人员 -->
          <el-form-item :label="$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.dialog.person')" prop="inspectUser">
            <el-select
              v-model="addEditForm.inspectUser"
              :placeholder="$t('message.safeMangeCheck.pleaseChoose')"
              filterable
              multiple
            >
              <el-option
                v-for="item in accountList"
                :key="item.userId + 'inspectUser'"
                :label="item.workerName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item :label="'是否需要签到'" prop="reportType">
            <el-radio v-model="addEditForm.reportType" :label="1">是</el-radio>
            <el-radio v-model="addEditForm.reportType" :label="2">否</el-radio>
          </el-form-item> -->
          <!-- 检查说明 -->
          <el-form-item :label="$t('message.safeMangeCheck.checked')+$t('message.safeMangeCheck.dialog.explain')" prop="inspectRemark">
            <el-input
              v-model="addEditForm.inspectRemark"
              type="textarea"
              :placeholder="$t('message.safeManage.placeholder')"
            ></el-input>
          </el-form-item>
        </el-form>

        <div class="dialog-footer">
          <!-- 取消 确定 -->
          <el-button
            class="cancleBtn"
            @click="dialogVisible = false"
            icon="el-icon-circle-close"
            size="medium"
            >{{$t('message.safeMangeCheck.dialog.cancel')}}</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="addSaveBtn"
            size="medium"
            >{{$t('message.safeMangeCheck.dialog.confirm')}}</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getInspectTypeListApi,
  getinspectTaskRecordListApi,
  addinspectTaskRecordApi,
  deleteinspectTaskRecordApi,
} from "@/assets/js/api/safeManage.js";
import { getProjectChilderSystemUserListApi } from "@/assets/js/api/configManage";
import messageV2Vue from '../../../messageV2.vue';
export default {
  data() {
    return {
      searchForm: {
        frequencyType:'', // frequencyType ==7  班检  frequencyType ==6 季检
        inspectTypeId: "",
        startTime: "",
        endTime: "",
        pageNo: 1,
        pageSize: 10,
        sn: this.$store.state.projectSn,
      },
      pageTotal: 0,
      daterange: [],
      checkType: [],
      rocordList: [],
      addEditForm: {
        createUser: "",
        endTime: "",
        frequencyNum: 1,
        frequencyType: 1,
        inspectRemark: "",
        inspectTypeId: "",
        reportType: 1,
        sn: "",
        startTime: "",
        taskName: "",
        inspectUser: [],
      },
      addEditFormRules: {
        inspectTypeId: [
          // 请选择检查类型
          { required: true, message:this.$t('message.safeMangeCheck.pleaseChoose')+this.$t('message.safeMangeCheck.checked')+this.$t('message.safeMangeCheck.type'), trigger: "change" },
        ],
        taskName: [
          // 请输入任务名称
          { required: true, message: this.$t('message.safeManage.placeholder')+this.$t('message.safeMangeCheck.task')+this.$t('message.safeMangeCheck.name'), trigger: "blur" },
        ],
        startTime: [
          // 请选择计划检查时间
          { required: true, message:this.$t('message.safeMangeCheck.pleaseChoose')+this.$t('message.safeMangeCheck.plan')+this.$t('message.safeMangeCheck.checked')+this.$t('message.safeMangeCheck.time'), trigger: "change" },
        ],
        inspectUser: [
          // 请选择检查人员
          { required: true, message:this.$t('message.safeMangeCheck.pleaseChoose')+this.$t('message.safeMangeCheck.checked')+this.$t('message.safeMangeCheck.dialog.person'), trigger: "change" },
        ],
      },
      dialogVisible: false,
      isAdd: true,
      checkDaterange: [],
      frequencyType: this.$t('message.safeMangeCheck.frequency'),
      accountList: [],
    };
  },
  
  mounted() {
    this.loadList();
    this.getCheckTypeList();
    this.getAccountList();
  },
  methods: {
      refreshFn(){
          this.searchForm.inspectTypeId=''
          this.daterange=[]
          this.searchForm.startTime = "";
        this.searchForm.endTime = "";
        this.searchForm.pageNo=1
                this.searchForm.pageSize=10
        this.loadList()
      },
    parseInspectUser(row) {
      let aa = row.inspectUser;
        let num = aa.length - aa.replace(/,/g, "").length;
        return num + 1;
    },
    getAccountList() {
      getProjectChilderSystemUserListApi({
        projectSn: this.$store.state.projectSn,
      }).then((result) => {
        this.accountList = result.result;
      });
    },
    changeDate2() {
      if (this.daterange) {
        this.searchForm.startTime = this.daterange[0];
        this.searchForm.endTime = this.daterange[1];
      } else {
        this.searchForm.startTime = "";
        this.searchForm.endTime = "";
      }
    },
    changeDate() {
      if (this.checkDaterange) {
        this.addEditForm.startTime = this.checkDaterange[0];
        this.addEditForm.endTime = this.checkDaterange[1];
      } else {
        this.addEditForm.startTime = "";
        this.addEditForm.endTime = "";
      }
    },
    detailsPoint(item) {
        this.$router.push('/project/safeManage/subTasklist?id='+item.id)
    },
    getCheckTypeList() {
      getInspectTypeListApi({
        sn: this.$store.state.userInfo.headquartersSn,
      }).then((result) => {
        console.log('检查类型',result)
        this.checkType = result.result;
      });
    },
    addSaveBtn() {
      this.$refs["addEditForm"].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            this.addEditForm.sn = this.$store.state.projectSn;
            let json = this.addEditForm;
            json.inspectUser = json.inspectUser.join(",");
            json.createUser = this.$store.state.userInfo.userId;
            console.log('--------新增参数',json)
            addinspectTaskRecordApi(json).then((result) => {
              this.$message.success("添加成功！");
              this.checkDaterange = [];
              this.loadList();
              this.$refs["addEditForm"].resetFields();
              this.dialogVisible = false;
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    loadList() {
      console.log('------查询条件',this.searchForm)
      getinspectTaskRecordListApi(this.searchForm).then((result) => {
        this.rocordList = result.result.records;
        this.pageTotal = result.result.total;
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.loadList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.loadList();
    },
    deleteTaskFn(item){
        this.$confirm('确定删除【'+item.taskName+'】吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let data = {
                id:item.id
            };
           deleteinspectTaskRecordApi(data).then(res=>{
               if(res.code==200){
                   this.loadList();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
               }else{
                   this.$message.error(res.message)
               }
           }) 

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
};
</script>
<style lang="less" scoped>
.filterBox {
  margin: 15px;
}
.smallInput {
  display: inline-block;
  width: 148px !important;
  /deep/.el-input__inner {
    width: 148px;
  }
  /deep/.el-input {
    width: 100% !important;
  }
}
</style>