<template>
    <el-dialog
      :title="titleMap[mode]"
      v-model="visible"
      :size="1000"
      destroy-on-close
      @closed="$emit('closed')"
    >
      <el-container v-loading="loading">
        <el-main style="padding: 0 20px 20px 20px">
          <el-form
            ref="dialogForm"
            :model="form"
            label-width="100px"
            label-position="right"
            :rules="rule1"
          >
            <el-row>
              <el-col :md="12" :sm="24">
                <el-form-item label="关联工段" prop="mgroup">
                  <el-input v-model="form.mgroup_name" placeholder="关联工段" disabled/>
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item label="当班班次" prop="shift">
                  <el-input v-model="form.shift_name" placeholder="当班班次" disabled/>
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item label="开始时间" prop="start_time">
                  <el-date-picker
                      disabled
                      v-model="form.start_time"
                      type="datetime"
                      format="YYYY-MM-DD HH:mm"
                      placeholder="基础月份"
                      style="width: 100%;"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item label="结束时间" prop="end_time">
                  <el-date-picker
                      disabled
                      v-model="form.end_time"
                      type="datetime"
                      format="YYYY-MM-DD HH:mm"
                      placeholder="对比月份"
                      style="width: 100%;"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item label="当班班组" prop="team">
                  <el-select
                    v-model="form.team"
                    placeholder="当班班组"
                    clearable
                    style="width: 100%;"
                    @change="teamChange"
                  >
                    <el-option
                    v-for="item in teamOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item label="班组班长" prop="leader_name">
                  <el-input v-model="form.leader_name" placeholder="班组班长" disabled/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="生产情况记录">
                    <el-input
                      type="textarea"
                      :rows="4"
                      v-model="form.note"
                      placeholder="生产情况记录"
                    />
                  </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
        <el-footer>
          <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
          <el-button @click="visible = false">取消</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
  </template>
  <script>
  export default {
    emits: ["success", "closed"],
    data() {
      return {
        loading: false,
        mode: "add",
        titleMap: {
          add: "交接班日志",
          edit: "交接班日志",
          show: "查看交接班日志",
        },
        form: {
          type:10,
        },
        rules: {
            name: [{required: true, message: "请输入", trigger: "blur"}],
            number: [{required: true, message: "请输入", trigger: "blur"}],
            keeper_name: [{required: true, message: "请输入", trigger: "blur"}],
            belong_dept: [{required: true, message: "请选择", trigger: "blur"}]
          },
        visible: false,
        isSaveing: false,
        keeperOptions: [],
        depOptions: [],
        selectionFilters: [],
        setFiltersVisible: false,
        teamOptions:[],
        shiftOptions:[],
      };
    },
    mounted() {
      //获取班组
      this.getTeam();
      this.getShfit();
    },
    methods: {
      getTeam(){
        this.$API.mtm.team.list.req({page:0}).then(res=>{
          this.teamOptions = res;
        })
      },
      getShfit(){
        this.$API.mtm.shift.req({page:0}).then(res=>{
          this.shiftOptions = res;
        })
      },
      //显示
      open(mode = "add") {
        this.mode = mode;
        this.visible = true;
        return this;
      },
      teamChange(data){
        let that = this;
        that.teamOptions.forEach(item=>{
          if(item.id==data){
            that.form.leader_name = item.leader_name;
            that.form.leader= item.leader;
          }
        })
      },
      //表单提交方法
      submit() {
        this.$refs.dialogForm.validate(async (valid) => {
          if (valid) {
            this.isSaveing = true;
            try {
              let obj={};
              obj.note = this.form.note;
              obj.team = this.form.team;
              obj.shift = this.form.shift;
              obj.leader = this.form.leader;
              this.$API.wpm.sflog.update.req(this.form.id,obj).then(res=>{
                this.isSaveing = false;
                this.$emit("success", this.form, this.mode);
                this.visible = false;
                this.$message.success("操作成功");
                return res;
              })
            } catch (err) {
              //可以处理校验错误
              this.isSaveing = false;
              return err;
            }
          }
        });
      },
      //表单注入数据
      setData(data) {
        Object.assign(this.form,data);
      },
      //设置过滤项
      setFilters(filters) {
        this.selectionFilters = filters;
        this.setFiltersVisible = true;
      },
    },
  };
  </script>
  <style>
  </style>
  