<template>
  <div>
    <el-form label-width="100px">
      <el-row class="meetingbg">
        <el-col :span="12">
          <el-form-item label="会议时间">
            <el-date-picker v-model="form.meetingDate" type="date"
                            value-format="yyyy-MM-dd"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会议地点">
            <el-select v-model="form.venue">
              <el-option
                v-for="dict in venueOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会议名称">裂解装置调度</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="记录人">
            <el-select v-model="form.recorder">
              <el-option
                v-for="dict in recorderOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              ></el-option>

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="主题">Daily Production</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="参会人">
            <el-col :span="2">Cracker：</el-col>
            <el-col :span="22">
              <el-checkbox-group v-model="attendCrackerList">
                <el-checkbox v-for="dict in attendCrackerOptions" :label="dict.dictLabel"></el-checkbox>
              </el-checkbox-group>
            </el-col>
            <el-col :span="2">CTM：</el-col>
            <el-col :span="22">
              <el-checkbox-group v-model="attendCtmList">
                <el-checkbox v-for="dict in attendCtmOptions" :label="dict.dictLabel"></el-checkbox>

              </el-checkbox-group>
            </el-col>
            <el-col :span="2">CTA：</el-col>
            <el-col :span="22">
              <el-checkbox-group v-model="attendCtaList">
                <el-checkbox v-for="dict in attendCtaOptions" :label="dict.dictLabel"></el-checkbox>

              </el-checkbox-group>
            </el-col>
            <el-col :span="2">LAB：</el-col>
            <el-col :span="22">
              <el-checkbox-group v-model="attendLabList">
                <el-checkbox v-for="dict in attendLabOptions" :label="dict.dictLabel"></el-checkbox>

              </el-checkbox-group>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Safety Topic">
            <el-input type="textarea" style="width: 360px" v-model="form.safetyTopic"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <table class="color-table" width="100%" border="0" cellspacing="0">
        <tr class="meetingbg">
          <th>Item</th>
          <th>Description</th>
          <th>Action by</th>
          <td></td>
        </tr>
        <!-- item1 -->
        <tr class="yellowbg">
          <td>1、</td>
          <td>Production Activities</td>
          <td></td>
          <td></td>
        </tr>
        <tr class="yellowbg">
          <td>1.1</td>
          <td>裂解炉运行模式：
            <el-input v-model="optModeData" style="width: 360px"></el-input>

            <el-checkbox-group style="margin-top: 5px" v-model="optItemList" @change="changeOpt">
              <el-checkbox v-for="dict in optItemOptions" style="margin-left: 0px;margin-right: 5px;"
                           :label="dict.dictLabel" border>

              </el-checkbox>
            </el-checkbox-group>
          </td>
          <td>ss</td>
          <td></td>
        </tr>
        <tr class="yellowbg">
          <td>1.2</td>
          <td>负荷（t/hr）：裂解：
            <el-input v-model="form.split" style="width: 160px"></el-input>
            PGU：
            <el-input v-model="form.pgu" style="width: 160px"></el-input>
            AEU：
            <el-input v-model="form.aeu" style="width: 160px"></el-input>
          </td>
          <td>ss</td>
          <td></td>
        </tr>
        <tr class="yellowbg" v-for="(item1, index) in form.items1" :key="'item1'+index">
          <td>1.{{ 3 + index }}</td>
          <td>
            <el-input type="textarea"  v-model="item1.description"></el-input>
          </td>
          <td>
            <el-select multiple filterable allow-create v-model="item1.actionby">
              <el-option
                v-for="dict in actionOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              ></el-option>
            </el-select>
          </td>
          <td>
            <el-button type="text" @click="deleteItem(1, index)">移除</el-button>
          </td>
        </tr>
        <tr class="yellowbg">
          <td colspan="4" style="text-align: right">
            <el-button @click="addItem(1)">新增</el-button>
          </td>
        </tr>

        <!-- item2 -->
        <tr class="greenbg">
          <td>2、</td>
          <td>CTM Activities</td>
          <td></td>
          <td></td>
        </tr>
        <tr class="greenbg" v-for="(item2, index) in form.items2" :key="'item2'+index">
          <td>2.{{ 1 + index }}</td>
          <td>
            <el-input type="textarea"  v-model="item2.description"></el-input>
          </td>
          <td>
            <el-select filterable multiple allow-create v-model="item2.actionby">
              <el-option
                v-for="dict in actionOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              ></el-option>
            </el-select>
          </td>
          <td>
            <el-button type="text" @click="deleteItem(2, index)">移除</el-button>
          </td>
        </tr>
        <tr class="greenbg" style="text-align: right">
          <td colspan="4">
            <el-button @click="addItem(2)">新增</el-button>
          </td>
        </tr>

        <!-- item3 -->
        <tr class="yellowbg">
          <td>3、</td>
          <td>CTA Activities</td>
          <td></td>
          <td></td>
        </tr>
        <tr class="yellowbg" v-for="(item3, index) in form.items3" :key="'item3'+index">
          <td>3.{{ 1 + index }}</td>
          <td>
            <el-input type="textarea"  v-model="item3.description"></el-input>
          </td>
          <td>
            <el-select filterable multiple allow-create v-model="item3.actionby">
              <el-option
                v-for="dict in actionOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              ></el-option>
            </el-select>
          </td>
          <td>
            <el-button type="text" @click="deleteItem(3, index)">移除</el-button>
          </td>
        </tr>
        <tr class="yellowbg" style="text-align: right">
          <td colspan="4">
            <el-button @click="addItem(3)">新增</el-button>
          </td>
        </tr>
        <!-- item4 -->
        <tr class="greenbg">
          <td>4、</td>
          <td>高危作业</td>
          <td></td>
          <td></td>
        </tr>
        <tr class="greenbg" v-for="(item4, index) in form.items4" :key="'item4'+index">
          <td>4.{{ 1 + index }}</td>
          <td>
            <el-input type="textarea"  v-model="item4.description"></el-input>
          </td>
          <td>
            <el-select filterable multiple allow-create v-model="item4.actionby">
              <el-option
                v-for="dict in actionOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              ></el-option>
            </el-select>
          </td>
          <td>
            <el-button type="text" @click="deleteItem(4, index)">移除</el-button>
          </td>
        </tr>
        <tr class="greenbg" style="text-align: right">
          <td colspan="4">
            <el-button @click="addItem(4)">新增</el-button>
          </td>
        </tr>
        <!-- item5 -->
        <tr class="yellowbg">
          <td>5、</td>
          <td>其他</td>
          <td></td>
          <td></td>
        </tr>
        <tr class="yellowbg" v-for="(item5, index) in form.items5" :key="'item5'+index">
          <td>5.{{ 1 + index }}</td>
          <td>
            <el-input type="textarea"  v-model="item5.description">

            </el-input>
          </td>
          <td>
            <el-select filterable multiple allow-create v-model="item5.actionby">
              <el-option
                v-for="dict in actionOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictLabel"
              ></el-option>
            </el-select>
          </td>
          <td>
            <el-button type="text" @click="deleteItem(5, index)">移除</el-button>
          </td>
        </tr>
        <tr class="yellowbg" style="text-align: right">
          <td colspan="4">
            <el-button @click="addItem(5)">新增</el-button>
          </td>
        </tr>
      </table>
    </el-form>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button v-hasPermi="['plant:dailyMeeting:edit']" type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  listDailyMeeting,
  getDailyMeetingLast,
  getDailyMeeting,
  delDailyMeeting,
  addDailyMeeting,
  updateDailyMeeting,
  exportDailyMeeting,
  importTemplate
} from "@/api/plant/dailyMeeting";
import {listDailyMeetingConfig, getDailyMeetingConfig} from "@/api/plant/dailyMeetingConfig";

export default {
  name: "dailyMeetingDetail",
  data() {
    return {
      optModeData: null,
      venueOptions: null,
      optModeOptions: null,
      optItemOptions: null,
      recorderOptions: null,
      attendCrackerOptions: [],
      attendCtmOptions: [],
      attendCtaOptions: [],
      attendLabOptions: [],
      actionOptions: null,
      attendCrackerList: [],
      attendCtmList: [],
      attendCtaList: [],
      attendLabList: [],
      optItemList: [],
      form: {
        id: null,
        recorder: null,
        meetingNo: null,
        meetingDate: null,
        venue: null,
        subject: null,
        attendCracker: null,
        attendCtm: null,
        attendCta: null,
        attendLab: null,
        safetyTopic: null,
        delFlag: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        optItem: null,
        deptId: null,
        val1: '',
        val2: '',
        val3: '',
        val4: '',
        val5: '',
        val6: '',
        items1: [{}],
        items2: [{}],
        items3: [{}],
        items4: [{}],
        items5: [{}]
      }
    }
  },
  created() {
    const pId = this.$route.params && this.$route.params.id;
    getDailyMeetingConfig(1).then(response => { // 地点
      this.venueOptions = response.data.dictList;
      if (pId == 0) {
        this.form.venue = this.venueOptions[0].dictValue
      }
    });

    getDailyMeetingConfig(3).then(response => { // 运行明细
      this.optItemOptions = response.data.dictList;
      if (pId == 0) {
        this.optItemList = response.data.dictList.map(item => item.dictLabel)
      }
    });
    getDailyMeetingConfig(4).then(response => { // 记录人
      this.recorderOptions = response.data.dictList;
    });
    getDailyMeetingConfig(5).then(response => { // cracker
      this.attendCrackerOptions = response.data.dictList;
      if (pId == 0) {
        this.attendCrackerList = response.data.dictList.map(item => item.dictLabel)
      }
    });
    getDailyMeetingConfig(6).then(response => { // cracker
      this.attendCtmOptions = response.data.dictList;
      if (pId == 0) {
        this.attendCtmList = response.data.dictList.map(item => item.dictLabel)
      }
    });
    getDailyMeetingConfig(7).then(response => { // cracker
      this.attendCtaOptions = response.data.dictList;
      if (pId == 0) {
        this.attendCtaList = response.data.dictList.map(item => item.dictLabel)
      }
    });
    getDailyMeetingConfig(8).then(response => { // cracker
      this.attendLabOptions = response.data.dictList;
      if (pId == 0) {
        this.attendLabList = response.data.dictList.map(item => item.dictLabel)
      }
    });
    getDailyMeetingConfig(9).then(response => { // cracker
      this.actionOptions = response.data.dictList;
    });

    if (pId != 0) {
      getDailyMeeting(pId).then(response => {
        this.form = response.data
        this.optItemList = response.data.optItem.split(",")
        this.attendCrackerList = response.data.attendCracker.split(",")
        this.attendCtmList = response.data.attendCtm.split(",")
        this.attendCtaList = response.data.attendCta.split(",")
        this.attendLabList = response.data.attendLab.split(",")
        this.optModeData = response.data.optMode
        this.getSelectVal(this.form.items1)
        this.getSelectVal(this.form.items2)
        this.getSelectVal(this.form.items3)
        this.getSelectVal(this.form.items4)
        this.getSelectVal(this.form.items5)
      });
    } else {
      let param = {}
      getDailyMeetingLast(param).then(response => {
        this.form = response.data
        this.optItemList = response.data.optItem.split(",")
        this.attendCrackerList = response.data.attendCracker.split(",")
        this.attendCtmList = response.data.attendCtm.split(",")
        this.attendCtaList = response.data.attendCta.split(",")
        this.attendLabList = response.data.attendLab.split(",")
        this.optModeData = response.data.optMode
        this.getSelectVal(this.form.items1)
        this.getSelectVal(this.form.items2)
        this.getSelectVal(this.form.items3)
        this.getSelectVal(this.form.items4)
        this.getSelectVal(this.form.items5)
        this.form.safetyTopic = "1、现场动火安全 \n" +
          "2、环保注意事项"
        // this.attendCrackerList = this.attendCrackerOptions;
        // this.optModeData = "9+1+A+B"
        this.form.meetingDate = new Date()
        console.log(this.$store.state.user.staffId)
        this.form.recorder = this.$store.state.user.nickName
      });

    }
  },
  methods: {
    addItem(type) {
      if (type === 1) {
        this.form.items1.push({description: '', actionby: ''})
      } else if (type === 2) {
        this.form.items2.push({description: '', actionby: ''})
      } else if (type === 3) {
        this.form.items3.push({description: '', actionby: ''})
      } else if (type === 4) {
        this.form.items4.push({description: '', actionby: ''})
      } else if (type === 5) {
        this.form.items5.push({description: '', actionby: ''})
      }
    },
    deleteItem(type, index) {
      if (type === 1) {
        this.form.items1.splice(index, 1)
      } else if (type === 2) {
        this.form.items2.splice(index, 1)
      } else if (type === 3) {
        this.form.items3.splice(index, 1)
      } else if (type === 4) {
        this.form.items4.splice(index, 1)
      } else if (type === 5) {
        this.form.items5.splice(index, 1)
      }
    },
    getSelectVal(item) {
      for (let i = 0; i < item.length; i++) {
        if (item[i].actionby)
          item[i].actionby = item[i].actionby.split(",")
      }
    },
    setSelectVal(item) {
      for (let i = 0; i < item.length; i++) {
        if (Array.isArray(item[i].actionby)) {
          item[i].actionby = item[i].actionby.join(",");
        } else {
          // 如果 actionby 不是数组，可以给它一个默认值，或者跳过
          item[i].actionby = "";  // 或者根据需求进行其他处理
        }
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.form.optItem = this.optItemList.join(",")
      this.form.attendCracker = this.attendCrackerList.join(",")
      this.form.attendCtm = this.attendCtmList.join(",")
      this.form.attendCta = this.attendCtaList.join(",")
      this.form.attendLab = this.attendLabList.join(",")
      this.form.optMode = this.optModeData
      this.setSelectVal(this.form.items1)
      this.setSelectVal(this.form.items2)
      this.setSelectVal(this.form.items3)
      this.setSelectVal(this.form.items4)
      this.setSelectVal(this.form.items5)
      if (this.form.id != null) {
        updateDailyMeeting(this.form).then(response => {
          this.msgSuccess("修改成功");
          this.close()
        });
      } else {
        addDailyMeeting(this.form).then(response => {
          this.msgSuccess("新增成功");
          this.close()
        });
      }
    },
    changeOpt(data) {
      console.log(data)
      let arr1 = ["H110", "H112", "H113", "H115", "H116", "H118", "H111", "H114", "H117"]
      let arr2 = ["H130"]
      let arr3 = ["H109A"]
      let arr4 = ["H109B"]
      let val1 = this.countDupVal(data, arr1)
      if (this.countDupVal(data, arr2) > 0) {
        val1 = val1 + "+1"
      } else {
        val1 = val1 + "+0"
      }
      if (this.countDupVal(data, arr3) > 0) {
        val1 = val1 + "+A"
      }
      if (this.countDupVal(data, arr4) > 0) {
        val1 = val1 + "+B"
      }
      console.log(val1)
      this.optModeData = val1

    },

    countDupVal(array1, array2) {
      // 找到两个数组的交集
      const intersection = array1.filter(value => array2.includes(value));
      // 返回交集中元素的个数
      return intersection.length;
    },

    /** 关闭按钮 */
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({path: "/plant/meeting/dailyMeeting", query: {t: Date.now()}})
    },
  },

}
</script>
<style lang="scss" scoped>
.meetingbg {
  background-color: #D9E2F3;
}

.yellowbg {
  background-color: #FFF3CB;
}

.greenbg {
  background-color: #E2EFD9;
}

.color-table td, .color-table th {
  padding: 10px 12px;
}
</style>
