<template>
  <!-- 弹出框表单 -->
  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
      <el-row style="margin-bottom: 20px;">
        <Field
          :span="20"
          label="是否启用该服务"
          prop="used"
          v-model="form.used"
          type="radio"
          :enumData="dict.used"
          placeholder="请选择是否启用该服务"
        />
        <Field :span="20" label="监测周期配置">
          <el-checkbox true-label="1" false-label="0" v-model="form.monday"
            >周一</el-checkbox
          >

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

          <el-checkbox true-label="1" false-label="0" v-model="form.wednesday"
            >周三</el-checkbox
          >

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

          <el-checkbox true-label="1" false-label="0" v-model="form.friday"
            >周五</el-checkbox
          >
          <el-checkbox true-label="1" false-label="0" v-model="form.saturday"
            >周六</el-checkbox
          >

          <el-checkbox true-label="1" false-label="0" v-model="form.sunday"
            >周日</el-checkbox
          >
        </Field>

        <Field
          :span="20"
          label="单日服务最大人数设置"
          prop="maxServicePersonNum"
          v-model="form.maxServicePersonNum"
          placeholder="请输入单日服务最大人数设置"
        />
        <Field
          :span="20"
          label="累计服务频次预警"
          prop="alertServiceNum"
          v-model="form.alertServiceNum"
          placeholder="请输入累计服务频次预警"
        />
        <Field
          :span="20"
          label="备注"
          prop="remark"
          v-model="form.remark"
          type="textarea"
          placeholder="请输入备注"
        />
      </el-row>

      <el-divider content-position="center" style="color: #aaa;"
        ><span style="color: #aaa;"
          >预约自动签到配置时间段信息</span
        ></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-time-select
              placeholder="起始时间"
              v-model="scope.row.serviceTimeStart"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="HH:mm"
              :picker-options="{
                start: '08:00',
                step: '00:30',
                end: '18:00',
              }"
            >
            </el-time-select>
            <!--                                    <el-input v-model="scope.row.serviceTimeStart" placeholder="请输入时间段时候开始时间" />-->
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="serviceTimeEnd">
          <template slot-scope="scope">
            <el-time-select
              placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="scope.row.serviceTimeEnd"
              :picker-options="{
                start: '08:00',
                step: '00:30',
                end: '18:00',
              }"
            >
            </el-time-select>

            <!--                                    <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>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        v-if="pageInfo.type !== 'view'"
        @click="submitForm"
        >确 定</el-button
      >
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import moment from "moment";
import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow";
export default {
  mixins: [form],
  components: {
    dialogShow,
  },
  data() {
    return {
      // 子表选中数据
      checkedAppointmentConfigTimes: [],
      // 预约自动签到配置时间段表格数据
      appointmentConfigTimesList: [],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "预约自动签到配置",
      // 是否显示弹出层
      open: false,
      toString: [
        "used",
        "monday",
        "tuesday",
        "wednesday",
        "thursday",
        "friday",
        "saturday",
        "sunday",
      ],
      // 表单校验
      rules: {
        createTime: [{ required: true, message: "请选择创建时间" }],
      },
    };
  },

  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) {
        data.entity.appointmentConfigTimesList.map((i) => {
          i.serviceTimeStart = moment(i.serviceTimeStart).format("HH:mm");
          i.serviceTimeEnd = moment(i.serviceTimeEnd).format("HH:mm");
        });
        this.appointmentConfigTimesList =
          data.entity.appointmentConfigTimesList;
      }
      return data;
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "appointment/config/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.title = "修改预约自动签到配置";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "appointment/config/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增预约自动签到配置";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "appointment/config/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "预约自动签到配置详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },
    beforeSubmit(data) {
      data.appointmentConfigTimesList.map((i) => {
        const serviceTimeStart = moment(i.serviceTimeStart, "HH:mm");
        const serviceTimeEnd = moment(i.serviceTimeEnd, "HH:mm");
        i.serviceTimeStart = moment()
          .set({
            hour: serviceTimeStart.hour(),
            minute: serviceTimeStart.minute(),
          })
          .format("yyyy-MM-DD HH:mm:ss");
        i.serviceTimeEnd = moment()
          .set({ hour: serviceTimeEnd.hour(), minute: serviceTimeEnd.minute() })
          .format("yyyy-MM-DD HH:mm:ss");
      });
      return data;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        siteId: null,
        siteName: "",
        used: 0,
        monday: 0,
        tuesday: 0,
        wednesday: 0,
        thursday: 0,
        friday: 0,
        saturday: 0,
        sunday: 0,
        maxServicePersonNum: 0,
        alertServiceNum: 0,
        remark: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
