<template>
  <div class="fullHeight whiteBlock">
    <vue-scroll>
      <div class="form-add">
        <el-form ref="form" :model="form" :rules="rules" label-width="400px">
          <el-form-item
            :label="$t('message.safeManage.addSafeRecord.inspection')"
            prop="checkNature"
          >
            <el-select
              v-model="form.checkNature"
              :placeholder="
                $t('message.safeManage.addSafeRecord.placeholder_inspection')
              "
              size="medium"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('message.safeManage.addSafeRecord.items')" prop="checkPoints">
            <el-cascader
              v-model="checkPoints"
              ref="ccCascader"
              separator="/"
              :placeholder="
                $t('message.safeManage.addSafeRecord.placeholder_items')
              "
              :options="checkContent"
              :props="props"
              @change="changeCheckPoints"
              clearable
              expand-trigger="hover"
              popper-class="ticket_ccCascader"
              size="medium"
            ></el-cascader>
          </el-form-item>
          <el-form-item :label="$t('message.safeManage.addSafeRecord.content')" prop="checkContent">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6 }"
              :placeholder="$t('message.safeManage.placeholder')"
              v-model="form.checkContent"
              size="medium"
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('message.safeManage.addSafeRecord.remarks')" prop="remarks">
              <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              :placeholder="$t('message.safeManage.placeholder')"
              v-model="form.remarks"
              size="medium"
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
          <!-- 检查时间 -->
          <el-form-item :label="$t('message.safeMangeCheck.checkedTime')" prop="checkTime">
            <!-- 选择日期时间 -->
             <el-date-picker
            v-model="form.checkTime"
            type="datetime"
            :placeholder="$t('message.safeMangeCheck.chooseDateAndTime')" 
            style="width:100%">
          </el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('message.safeManage.addSafeRecord.appendix')"
            prop="fileUrl"
          >
            <el-upload
              :action="uploadUrl"
              list-type="picture-card"
              name="files"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :limit="5"
              ref="upload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item prop="isRectify" :label="$t('message.safeManage.addSafeRecord.rectify')">
            <el-switch v-model="rectify" active-color="#13ce66" @change='switchChange'>
            </el-switch>
          </el-form-item>
          <el-form-item
            :label="$t('message.safeManage.addSafeRecord.rectifyName')"
            v-if="rectify"
          >
            <el-select
              v-model="form.rectifyPeople"
              :placeholder="
                $t('message.safeManage.addSafeRecord.placeholder_rectify')
              "
              size="medium"
            >
              <el-option
                v-for="(item, index) in crewList"
                :key="index"
                :label="item.workerName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.safeManage.addSafeRecord.noticeName')"
          >
            <el-select
              v-model="informCrew"
              :placeholder="
                $t('message.safeManage.addSafeRecord.placeholder_notice')
              "
              multiple
              size="medium"
            >
              <el-option
                v-for="(item, index) in crewList"
                :key="index"
                :label="item.workerName"
                :value="item.workerName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.safeManage.addSafeRecord.rectify_require')"
            v-if="rectify"
            prop="rectifyRequire"
          >
            <el-input
              type="textarea"
              autosize
              :placeholder="$t('message.safeManage.placeholder')"
              v-model="form.rectifyRequire"
              size="medium"
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="submitBtn">
              {{ $t("message.safeManage.addSafeRecord.submit") }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </vue-scroll>
    <!-- 查看大图 -->
    <el-dialog :modal-append-to-body="false" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import {
  getCheckPointsListApi,
  getCrewListDataApi,
  addSecurityChecksApi
} from "@/assets/js/api/safeManage";
import moment from "moment";

export default {
  data() {
    return {
      uploadUrl: "",
      fileUrl: "",
      projectSn: "",
      options: [
        {
          value: this.$t('message.safeMangeCheck.checkedCycle')[0]/* "周检" */,
          label: this.$t('message.safeMangeCheck.checkedCycle')[0]/* "周检" */,
        },
        {
          value:this.$t('message.safeMangeCheck.checkedCycle')[1] /* "月检" */,
          label: this.$t('message.safeMangeCheck.checkedCycle')[1]/* "月检" */,
        },
        {
          value: this.$t('message.safeMangeCheck.checkedCycle')[2]/* "其它" */,
          label: this.$t('message.safeMangeCheck.checkedCycle')[2]/* "其它" */,
        },
      ], //检查信息
      checkContent: [], //检查项
      crewList: [], //通知人员 整改人员 下拉数据
      informCrew: [], //选中的通知人员
      fileList: [],
      checkPoints:[], //选中的检查项
      props: {
        multiple: true,
        value:'checkname',
        label:'checkname',
        children:'children'
      },
      rectify: true,
      form: {
          checkContent:'',
          checkNature:'',
          checkPoints:'',
          fileUrl:'',
          isRectify:0,
          notifier:'',
          rectifyPeople:'',
          rectifyRequire:'',
          remarks:'',
          checkTime:'',
      },
      rules:{
        checkContent:[
          { required: true, message: this.$t('message.safeMangeCheck.placeholder')/* '请输入' */, trigger: 'blur' }
        ],
        checkNature:[
          { required: true, message: this.$t('message.safeMangeCheck.placeholder')/* '请输入' */, trigger: 'blur' }
        ],
        checkPoints:[
          { required: true, message:this.$t('message.safeMangeCheck.placeholder') /* '请输入' */, trigger: 'blur' }
        ],
        fileUrl:[
          { required: true, message: this.$t('message.safeMangeCheck.pleaseUpdate')/* '请上传' */, trigger: 'blur' }
        ],
        rectifyRequire:[
          { required: true, message: this.$t('message.safeMangeCheck.placeholder')/* '请输入' */, trigger: 'blur' }
        ],
     
      },

      value: "",
    
      //查看大图
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    this.getCheckPointsList();
    this.getCrewListData();
  },

  methods: {
    //获取检查项下拉
    getCheckPointsList() {
      let data = {
        projectSn: this.projectSn,
      };
      getCheckPointsListApi(data).then((res) => {
        if (res.code == 200) {
          //没有二级数据直接禁用
          for(let i=0; i<res.result.length;i++){
            if(res.result[i].children.length==0){
              res.result[i].disabled = true;
            }
          }
          this.checkContent = res.result;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //获取所有 整改人员 通知人员 列表
    getCrewListData() {
      let data = {
        projectSn: this.projectSn,
      };
      getCrewListDataApi(data).then((res) => {
        if (res.code == 200) {
          this.crewList = res.result;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //上传成功
    handleSuccess(file) {
      let data = { name: file.data[0].filename, url: file.data[0].imageUrl };
      this.fileList.push(data);
    },
    //删除成功
    handleRemove(file) {
      let url = file.response.data[0].imageUrl;
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].url == url) {
          this.fileList.splice(i, 1);
        }
      }
    },
    //查看图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //切换开关时
    switchChange(val){
        if(val){
            this.form.isRectify = 0;
            this.rectify = true;
        }else{
            this.form.isRectify = 1;
            this.rectify = false;
        }
    },

    //切换检查项
    changeCheckPoints(val) {
      let arr = [];
      for(let i =0;i<val.length;i++){
        let str = val[i][0]+"/"+val[i][1];
        arr.push(str)
      }
      this.form.checkPoints = arr.join(',');

    },
    //确定新增
    submitBtn() {
      this.form.fileUrl = this.fileList.length>0? JSON.stringify(this.fileList):'';
      this.form.notifier = this.informCrew.length>0? this.informCrew.join(','):'';
      this.$refs.form.validate((valid)=>{
        if(valid){
          let time = moment(this.form.checkTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.form.checkTime=time
          let data = JSON.parse(JSON.stringify(this.form));
          data.projectSn = this.projectSn;
          data.inspector = this.$store.state.userInfo.userId;
          addSecurityChecksApi(data).then(res=>{
              if(res.code==200){
                   this.form= {
                      checkContent:'',
                      checkNature:'',
                      checkPoints:'',
                      fileUrl:'',
                      isRectify:0,
                      notifier:'',
                      rectifyPeople:'',
                      rectifyRequire:'',
                      remarks:'',
                      checkTime:'',
                  };
                  this.rectify = true;
                  this.fileList = [];
                  this.informCrew=[];
                  this.checkPoints =[];
                  // '新增成功'
                  this.$message.success(this.$t('message.safeMangeCheck.addSuccess'));
                  this.$refs.upload.clearFiles();
              }else{
                this.$message.error(res.message)
              }
          })

        }else{
          return false;
        }
      })

    },
  },
};
</script>
<style lang="less" scoped>
.form-add {
  width: 60%;
  padding: 20px 0 20px;
  // background-color: #fff;

  .el-input--medium {
    width: 60%;
  }

  .el-select,
  .el-cascader--medium {
    width: 100%;
  }

  .el-cascader__tags {
    width: 60%;
  }
}
</style>