<template>
  <layout-form>
    <el-form :model="form" :loading="loading" :rules="rules" size='small' style="width:100%" label-width='120px' ref="form">
      <el-row>
        <Field :sapn="24" label="是否启用该服务" prop="used" v-model="form.used" type="select" :enumData="dict.used" placeholder="请选择是否启用该服务"/>
        <el-row>
        <Field :span="4" label="周一">
          <el-checkbox
              true-label="1"
              false-label="0"
              v-model="form.monday"
          ></el-checkbox>
        </Field>

        <Field :span="4" label="周二">
          <el-checkbox
              true-label="1"
              false-label="0"
              v-model="form.tuesday"
          ></el-checkbox>
        </Field>

        <Field :span="4" label="周三">
          <el-checkbox
              true-label="1"
              false-label="0"
              v-model="form.tuesday"
          ></el-checkbox>
        </Field>

        <Field :span="4" label="周四">
          <el-checkbox
              true-label="1"
              false-label="0"
              v-model="form.thursday"
          ></el-checkbox>
        </Field>
        </el-row>


        <Field label="周一是否监测" prop="monday" v-model="form.monday" type="select" :enumData="dict.monday" placeholder="请选择周一是否监测"/>
        <Field label="周二是否监测" prop="tuesday" v-model="form.tuesday" type="select" :enumData="dict.tuesday" placeholder="请选择周二是否监测"/>
        <Field label="周三是否监测" prop="wednesday" v-model="form.wednesday" type="select" :enumData="dict.wednesday" placeholder="请选择周三是否监测"/>
        <Field label="周四是否监测" prop="thursday" v-model="form.thursday" type="select" :enumData="dict.thursday" placeholder="请选择周四是否监测"/>
        <Field label="周五是否监测" prop="friday" v-model="form.friday" type="select" :enumData="dict.friday" placeholder="请选择周五是否监测"/>
        <Field label="周六是否监测" prop="saturday" v-model="form.saturday" type="select" :enumData="dict.saturday" placeholder="请选择周六是否监测"/>
        <Field label="周日是否监测" prop="sunday" v-model="form.sunday" type="select" :enumData="dict.sunday" placeholder="请选择周日是否监测"/>
        <Field label="单日服务最大人数设置" prop="maxServicePersonNum" v-model="form.maxServicePersonNum" placeholder="请输入单日服务最大人数设置"/>
        <Field label="累计服务频次预警" prop="alertServiceNum" v-model="form.alertServiceNum" placeholder="请输入累计服务频次预警"/>
        <Field label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
      </el-row>
      <el-divider content-position="center">预约自动签到配置时间段信息</el-divider>
      <br/>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddAppointmentConfigTimes">添加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAppointmentConfigTimes">删除</el-button>
        </el-col>
      </el-row>

      <el-table :data="appointmentConfigTimesList" :row-class-name="rowAppointmentConfigTimesIndex" @selection-change="handleAppointmentConfigTimesSelectionChange" ref="appointmentConfigTimes">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="序号" align="center" prop="index" width="50"/>
        <el-table-column label="备注" prop="serviceTimeStart">
          <template slot-scope="scope">

            <el-input v-model="scope.row.serviceTimeStart" placeholder="请输入备注" />
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="serviceTimeEnd">
          <template slot-scope="scope">

            <el-input v-model="scope.row.serviceTimeEnd" placeholder="请输入备注" />
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark">
          <template slot-scope="scope">

            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
          </template>
        </el-table-column>
      </el-table>

      <form-buttons @submit='submitForm' :noSaveBtn="pageInfo.type === 'view'"/>
    </el-form>
  </layout-form>
</template>

<script>
import form from "@/assets/mixins/form";
export default {
  mixins: [form],
  components: {
  },
  methods: {

    /** 预约自动签到配置时间段序号 */
    rowAppointmentConfigTimesIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 预约自动签到配置时间段添加按钮操作 */
    handleAddAppointmentConfigTimes() {
      let obj = {};
      obj.serviceTimeStart = "";
      obj.serviceTimeEnd = "";
      obj.remark = "";
      obj.createUserId = "";
      obj.createTime = "";
      obj.updateUserId = "";
      obj.updateTime = "";
      this.appointmentConfigTimesList.push(obj);
    },
    /** 预约自动签到配置时间段删除按钮操作 */
    handleDeleteAppointmentConfigTimes() {
      if (this.checkedAppointmentConfigTimes.length == 0) {
        this.$alert("请先选择要删除的预约自动签到配置时间段数据", "提示", { confirmButtonText: "确定", });
      } else {
        this.appointmentConfigTimesList.splice(this.checkedAppointmentConfigTimes[0].index - 1, 1);
      }
    },
    /** 单选框选中数据 */
    handleAppointmentConfigTimesSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.appointmentConfigTimes.clearSelection();
        this.$refs.appointmentConfigTimes.toggleRowSelection(selection.pop());
      } else {
        this.checkedAppointmentConfigTimes = selection;
      }
    },
    // 渲染前置处理
    beforeRender(data) {
      if(data.entity.appointmentConfigTimesList) {
        this.appointmentConfigTimesList = data.entity.appointmentConfigTimesList;
      }
      return data
    },

  },
  data() {
    return {
      toString:[
        "used",
        "monday",
        "tuesday",
        "wednesday",
        "thursday",
        "friday",
        "saturday",
        "sunday",
      ],
      // 子表选中数据
      checkedAppointmentConfigTimes: [],
      // 预约自动签到配置时间段表格数据
      appointmentConfigTimesList: [],
      rules: {
        createTime: [
          {required: true,message: "请选择创建时间" },
        ],
      }
    };
  }
};
</script>
