<template>
  <div id="edit-machine-form">
    <el-dialog
      title="编辑消毒计划"
      :visible.sync="dialogVisible"
      width="44%"
      center
    >
      <el-form :model="form" ref="form">
        <el-row>
          <el-col :span="10">
            <el-form-item label="设备型号:">
              <el-select style="width:135px" v-model="form.device_type">
                <el-option
                  v-for="item in this.DeviceType"
                  :key="item.id"
                  :label="item.equitment_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="消毒时长:">
              <el-input
                style="width:135px"
                v-model="form.disinfec_time"
              ></el-input>
              <span>分钟</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="时间:">
              <el-select
                v-model="form.time"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择时间"
              >
                <el-option
                  v-for="item in this.timeType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="班次:">
              <el-select
                v-model="form.class_time"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择时间"
              >
                <el-option
                  v-for="item in this.classType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="机表消毒方式:">
              <el-select style="width:135px" v-model="form.way">
                <el-option
                  v-for="item in this.disinfectType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="机表消毒液:">
              <el-select
                style="width:135px"
                v-model="form.machine_disinfectant"
                @change="changeDeviceType"
              >
                <el-option
                  v-for="item in this.disinfectantType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="液路消毒方式:">
              <el-select style="width:135px" v-model="form.disinfectant_way">
                <el-option
                  v-for="item in this.sterilizeType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="液路消毒液:">
              <el-select style="width:135px" v-model="form.disinfectant">
                <el-option
                  v-for="item in this.fluidPathType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllEquimentName, getEditMachine } from "@/api/manage";
export default {
  name: "EditMachineForm",
  props: {
    planData: {
      type: Array,
      default: function() {
        return {
          newPlanid: 0
        };
      }
    },
    planid: Number
  },
  data() {
    return {
      dialogVisible: false,
      DeviceType: [],
      form: {
        device_type: "",
        disinfec_time: "",
        time: [],
        class_time: [],
        way: "",
        machine_disinfectant: "",
        disinfectant_way: "",
        disinfectant: ""
      },
      timeType: [
        { id: 1, name: "周一" },
        { id: 2, name: "周二" },
        { id: 3, name: "周三" },
        { id: 4, name: "周四" },
        { id: 5, name: "周五" },
        { id: 6, name: "周六" },
        { id: 7, name: "周日" }
      ],
      classType: [
        { id: 1, name: "上午" },
        { id: 2, name: "下午" },
        { id: 3, name: "晚上" }
      ],
      // 基表消毒方式
      disinfectType: [
        { id: 1, name: "擦拭" },
        { id: 2, name: "化学消毒" }
      ],
      // 基表消毒液
      disinfectantType: [
        { id: 1, name: "0.22%季铵盐" },
        { id: 2, name: "500mg/l含氯消毒剂" },
        { id: 3, name: "1000mg/l含氯消毒剂" },
        { id: 4, name: "1500mg/l含氯消毒剂" }
      ],
      // 夜路消毒方式
      sterilizeType: [
        { id: 1, name: "热化学消毒" },
        { id: 2, name: "化学消毒 + 除钙" },
        { id: 3, name: "热化学消毒 + 除钙" },
        { id: 4, name: "热消毒" },
        { id: 5, name: "化学消毒" },
        { id: 6, name: "除钙" },
        { id: 7, name: "清洗" }
      ],
      // 夜路消毒液
      fluidPathType: [
        { id: 1, name: "20%柠檬酸" },
        { id: 2, name: "25%柠檬酸" },
        { id: 3, name: "50%柠檬酸" },
        { id: 4, name: "50%柠檬酸 + 5%次氯酸钠" },
        { id: 5, name: "20%柠檬酸 + 10%冰醋酸" },
        { id: 6, name: "0.2%过氧化乙酸" },
        { id: 7, name: "10%冰醋酸" },
        { id: 8, name: "50%冰醋酸" },
        { id: 9, name: "5%次氯酸钠" }
      ]
    };
  },
  methods: {
    open: function() {
      this.dialogVisible = true;
    },
    getAllEquimentName() {
      getAllEquimentName().then(response => {
        if (response.data.state === 1) {
          var equit = response.data.data.equit;
          //console.log("equit", equit);
          this.DeviceType = equit;
        }
      });
    },
    getEditMachine(id) {
      getEditMachine(id).then(response => {
        if (response.data.state === 1) {
        }
      });
    }
  },
  created() {
    this.getAllEquimentName();
   // console.log("planid是什么", this.newPlanid);
    this.getEditMachine(this.planid);
  },
  mounted() {
    this.newPlanid = this.planid;
  },
  watch: {
    planid(newV, oldV) {
      this.newPlanid = this.planid;
    }
  }
};
</script>

<style scoped></style>
