<template>
  <div>
    <div class="divborder newSearchDiv">
      <div class="searchBtn">
        <Button
          type="success"
          class="twoWord"
          icon="md-add-circle"
          @click="add()"
        >
          添加
        </Button>
        <Button
          type="warning"
          class="twoWord"
          icon="ios-create-outline"
          @click="edit()"
        >
          修改
        </Button>
        <Button
          type="error"
          class="twoWord"
          icon="md-close-circle"
          @click="del()"
        >
          删除
        </Button>
        <Button
          type="primary"
          class="fourWord"
          icon="md-settings"
          @click="setting()"
        >
          设置模板
        </Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        highlight-row
        class="tableClass"
        :data="tableData"
        :columns="tableColumns"
        @on-current-change="handleRowChange"
      >
      </Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            show-elevator
            show-sizer
            show-total
            :total="total"
            :current.sync="page"
            :page-size="pagesize"
            :page-size-opts="[10, 20, 30, 40, 100]"
            @on-change="handlePage"
            @on-page-size-change="handlePageSize"
          >
          </Page>
        </div>
      </div>
    </div>
    <Modal v-model="modal" class="newModalClass" :width="520">
      <p slot="header">
        <span v-if="type == 1">添加</span>
        <span v-if="type == 2">修改</span>
      </p>
      <div class="modal_body">
        <div class="filter">
          <label><i>*</i>报告名称：</label>
          <Input v-model="name" class="searchInput" />
        </div>
        <div class="filter">
          <label><i>*</i>推送周期：</label>
          <RadioGroup v-model="cycle">
            <Radio :label="1">按天</Radio>
            <Radio :label="2">按周</Radio>
            <Radio :label="3">按月</Radio>
          </RadioGroup>
        </div>
        <div class="filter" v-if="cycle">
          <label></label>
          <div style="display: inline-block">
            <div v-if="cycle == 1">
              <p>
                每
                <InputNumber
                  class="searchInput"
                  v-model="day"
                  :min="0"
                  onkeypress="return /[\d]/.test(String.fromCharCode(event.keyCode))"
                />
                天
              </p>
              <p style="margin-top: 10px">
                发送时间点：
                <TimePicker
                  type="time"
                  v-model="send_time"
                  class="searchInput"
                ></TimePicker>
              </p>
            </div>
            <div v-if="cycle == 2">
              <p style="width: 300px">
                每周以下日期发送
                <RadioGroup v-model="day">
                  <Radio :label="1">{{ $t(900461) }}</Radio>
                  <Radio :label="2">{{ $t(900462) }}</Radio>
                  <Radio :label="3">{{ $t(900463) }}</Radio>
                  <Radio :label="4">{{ $t(900464) }}</Radio>
                  <Radio :label="5">{{ $t(900465) }}</Radio>
                  <Radio :label="6">{{ $t(900466) }}</Radio>
                  <Radio :label="0">{{ $t(900467) }}</Radio>
                </RadioGroup>
              </p>
              <p style="margin-top: 10px">
                发送时间点：
                <TimePicker
                  type="time"
                  v-model="send_time"
                  class="searchInput"
                ></TimePicker>
              </p>
            </div>
            <div v-if="cycle == 3">
              <p>
                每月以下日期发送
                <RadioGroup v-model="day">
                  <Radio :label="1">{{ $t(950032) }}</Radio>
                  <Radio :label="2">{{ $t(950033) }}</Radio>
                </RadioGroup>
              </p>
              <p style="margin-top: 10px">
                发送时间点：
                <TimePicker
                  type="time"
                  v-model="send_time"
                  class="searchInput"
                ></TimePicker>
              </p>
            </div>
          </div>
        </div>
        <div class="filter" style="margin-top: 20px">
          <label><i>*</i>启用时间：</label>
          <DatePicker
            type="date"
            v-model="startDate"
            class="searchInput"
            @on-change="getDate"
          ></DatePicker>
        </div>
        <div class="filter">
          <label>备注：</label>
          <Input
            type="textarea"
            v-model="remark"
            class="searchInput middleWidth"
            :autosize="{ minRows: 1, maxRows: 1 }"
          />
        </div>
        <div class="filter" style="margin-top: 10px">
          <label><i>*</i>推送人员：</label>
          <Select
            v-model="user"
            class="searchSelect middleWidth nowropStyle"
            filterable
            multiple
          >
            <Option v-for="v in userList" :value="v.id" :key="v.value"
              >{{ v.name }}-{{ v.work_email }}
            </Option>
          </Select>
        </div>
      </div>
      <div slot="footer">
        <Button size="large" @click="modal = false">取消</Button>
        <Button size="large" type="primary" @click="submit()">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页参数
      total: 0,
      page: 1,
      pagesize: 10,
      // 表格数据源
      tableData: [],
      // 表格列字段
      tableColumns: [
        {
          title: "序号",
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
        },
        {
          title: "报告名称",
          key: "name",
          align: "center",
        },
        {
          title: "推送周期",
          key: "cycle_str",
          align: "center",
        },
        {
          title: "模板设置",
          key: "setting",
          align: "center",
        },
        {
          title: "报告接收人员",
          key: "user_info",
          align: "center",
        },
        {
          title: "启用时间",
          key: "first_date",
          align: "center",
        },
        {
          title: "备注",
          key: "remark",
          align: "center",
        },
      ],
      row: {},
      type: 1,
      modal: false,
      // 表单输入
      name: "",
      cycle: 0,
      send_time: "",
      day: 0,
      startDate: "",
      remark: "",
      user: [],
      // 推送人员下拉列表
      userList: [],
      formObj: {},
    };
  },
  mounted() {
    this.tableColumns = this.$time.initTableTitle(this.tableColumns);
    this.search(1, 10);
    this.getAlluser();
  },
  methods: {
    search(page, pagesize) {
      let data = {
        page: page,
        pagesize: pagesize,
      };
      this.request("/config/MonthReport/GetConfigPagedList", data, "get").then(
        (res) => {
          if (res.data.ret == 1) {
            this.total = res.data.total;
            this.renderTable(res.data.data);
          }
        }
      );
    },
    renderTable(arr = []) {
      let a = [];
      arr.forEach((item) => {
        let cycle = "";
        switch (item.cycle) {
          case 1:
            cycle = this.$t(950025);
            break;
          case 2:
            cycle = this.$t(950026);
            break;
          case 3:
            cycle = this.$t(950027);
            break;
        }
        a.push({
          id: item.id,
          cycle: item.cycle,
          cycle_str: cycle,
          first_date: item.first_date,
          setting: item.setting ? "已配置" : "未配置",
          name: item.name,
          remark: item.remark,
          user_info: item.user_info,
        });
      });
      this.tableData = a;
    },
    add() {
      this.name = "";
      this.cycle = 0;
      this.day = 0;
      this.send_time = "";
      this.startDate = "";
      this.remark = "";
      this.user = [];
      this.type = 1;
      this.modal = true;
    },
    edit() {
      if (this.row.id) {
        this.name = this.row.name;
        this.cycle = this.row.cycle;
        this.send_time = this.formObj.send_time;
        this.startDate = this.row.first_date;
        this.remark = this.row.remark;
        let arr = [];
        let user_mids;
        user_mids = this.formObj.user_mids;
        user_mids.forEach((ele) => {
          arr.push(parseInt(ele));
        });
        this.user = arr;
        this.day = this.formObj.day_interval[0];
        this.type = 2;
        this.modal = true;
      } else {
        this.$Message.error(this.$t(9000396));
      }
    },
    del() {
      if (!this.row.id) {
        this.$Message.error(this.$t(9000396));
        return false;
      }
      this.$Modal.confirm({
        title: this.$t(1018),
        content: "",
        width: 300,
        closable: true,
        okText: "删除",
        onOk: () => {
          this.request(
            "/config/MonthReport/DeleteReportConfig?id=" + this.row.id,
            "",
            "post"
          ).then((res) => {
            if (res.data.ret === 1) {
              this.$Message.success(this.$t(1058));
              this.page = 1;
              this.search(this.page, this.pagesize);
              this.row = {};
            } else {
              this.$Message.error(this.$t(res.data.msg));
            }
          });
        },
      });
    },
    setting() {
      if (this.row.id) {
        this.$router.push({
          path: "./template",
          query: { id: this.row.id },
        });
      } else {
        this.$Message.error(this.$t(9000396));
      }
    },
    submit() {
      if (!this.name) {
        this.$Message.error("请输入报告名称");
        return false;
      }
      if (!this.cycle) {
        this.$Message.error("请选择推送周期");
        return false;
      }
      if (this.cycle == 3) {
        if (this.day === 0) {
          this.$Message.error("请输入或选择发送周期");
          return false;
        }
      }
      if (!this.day && this.day !== 0) {
        this.$Message.error("请输入或选择发送周期");
        return false;
      }
      if (!this.send_time) {
        this.$Message.error("请选择发送时间点");
        return false;
      }
      if (!this.startDate) {
        this.$Message.error("请选择启用时间");
        return false;
      }
      if (!this.user.length) {
        this.$Message.error("请选择推送人员");
        return false;
      }

      let data = {
        name: this.name,
        cycle: parseInt(this.cycle),
        day_interval: this.day,
        first_date: this.startDate,
        send_time: this.send_time,
        remark: this.remark,
        userIds: this.user.join(","),
      };
      let url, msg;
      if (this.type == 1) {
        url = "/config/MonthReport/AddReportConfig";
        msg = this.$t(1055);
      } else {
        data.id = this.row.id;
        url = "/config/MonthReport/UpdateReportConfig";
        msg = this.$t(1060);
      }
      this.request(url, data, "post").then((res) => {
        if (res.data.ret == 1) {
          this.$Message.success(msg);
          this.search(this.page, this.pagesize);
          this.modal = false;
          this.row = {};
        } else {
          this.$Message.error(this.$t(res.data.msg));
        }
      });
    },
    getDate(v) {
      console.log(v);
      this.startDate = v;
    },
    getReportInfo() {
      let data = {
        id: this.row.id,
      };
      this.request("/config/MonthReport/GetReportConfigItem", data, "get").then(
        (res) => {
          if (res.data.ret == 1) {
            this.formObj = res.data.data;
          }
        }
      );
    },
    getAlluser() {
      let data = {
        page: 1,
        pagesize: 666666,
      };
      this.request("/config/user/GetUsers", data, "get").then((res) => {
        if (res.data.ret == 1) {
          let arr = res.data.data;
          arr.forEach((ele) => {
            this.userList.push(ele);
          });
        }
      });
    },
    handlePageSize(v) {
      this.pagesize = v;
      this.search(this.page, this.pagesize);
    },
    handlePage(v) {
      this.page = v;
      this.search(this.page, this.pagesize);
    },
    handleRowChange(v) {
      this.row = v;
      this.getReportInfo();
    },
    request(url, data, type) {
      if (type == "get") {
        return this.axios
          .request({
            url: url,
            params: data,
            method: type,
          })
          .then((res) => {
            return res;
          })
          .catch((error) => error);
      } else {
        return this.axios
          .request({
            url: url,
            data,
            method: type,
          })
          .then((res) => {
            return res;
          })
          .catch((error) => error);
      }
    },
  },
};
</script>