<template>
  <div>
    <div class="searchBox">
      <div>
        <DatePicker
          type="year"
          placeholder="请选择年份"
          v-model="historySearch.dhyear"
          @on-change="searchList()"
          style="margin-right: 16px; width: 200px"
          :clearable="false"
        />
        <RadioGroup v-model="historySearch.ltype" @on-change="searchList()">
          <Radio :label="1">中文</Radio>
          <Radio :label="2">英文</Radio>
        </RadioGroup>
        <!-- <Button type="primary" style="margin-left: 16px" @click="searchList()"
          >搜索</Button
        > -->
      </div>
      <div>
        <Button type="primary" @click="toAdd()">添加</Button>
      </div>
    </div>
    <Table border :columns="historyColumns" :data="historySearch.list">
      <template slot-scope="{ row }" slot="ltypeSlot">
        <span>{{ row.ltype === 1 ? "中文" : "英文" }}</span>
      </template>
      <template slot-scope="{ row }" slot="createtimeSlot">
        <span>{{ dateFormat(row.createtime) }}</span>
      </template>
      <template slot-scope="{ row }" slot="actionSlot">
        <div>
          <span
            style="color: #2d8cf0; cursor: pointer"
            @click="toModifyHistory(row)"
            >修改</span
          >
          <span style="margin: 0 10px; color: #2d8cf0">|</span>
          <span
            style="color: #ff001e; cursor: pointer"
            @click="toDelHistory(row.dhid)"
            >删除</span
          >
        </div>
      </template>
    </Table>
    <div class="foot_page" v-if="historySearch.total > 0">
      <Page
        :total="historySearch.total"
        @on-change="changePage"
        :current="historySearch.page"
        show-total
      ></Page>
    </div>
    <Modal
      v-model="historyAddForm.show"
      class="modal1"
      :mask-closable="false"
      title="添加发展历程"
    >
      <Form
        :label-width="90"
        label-position="right"
        ref="historyAddForm"
        :rules="addFormRules"
        :model="historyAddForm"
      >
        <FormItem label="语言" prop="ltype">
          <RadioGroup v-model="historyAddForm.ltype">
            <Radio :label="1">中文</Radio>
            <Radio :label="2">英文</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="日期" prop="date">
          <DatePicker
            type="month"
            placeholder="请选择日期"
            v-model="historyAddForm.date"
            style="margin-right: 16px; width: 200px"
            :clearable="false"
          />
        </FormItem>
        <FormItem label="内容" prop="content">
          <Input
            v-model="historyAddForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
          />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="historyAddForm.show = false">取消</Button>
        <Button @click="toSaveAdd()" type="primary">保存</Button>
      </div>
    </Modal>
    <Modal
      v-model="historyModifyForm.show"
      class="modal1"
      :mask-closable="false"
      title="修改发展历程"
    >
      <Form
        :label-width="90"
        label-position="right"
        ref="historyModifyForm"
        :rules="modifyFormRules"
        :model="historyModifyForm"
      >
        <FormItem label="日期" prop="date">
          <DatePicker
            type="month"
            placeholder="请选择日期"
            v-model="historyModifyForm.date"
            style="margin-right: 16px; width: 200px"
            :clearable="false"
          />
        </FormItem>
        <FormItem label="内容" prop="content">
          <Input
            v-model="historyModifyForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
          />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="historyModifyForm.show = false">取消</Button>
        <Button @click="toSaveModifyHistory()" type="primary">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { dh_list, dh_save, dh_update, dh_remove } from "@/api";
import { dateFormat } from "@/utils";
export default {
  data() {
    return {
      dateFormat,
      historySearch: {
        page: 1,
        size: 10,
        dhyear: new Date(),
        ltype: 1,
        total: 0,
        list: []
      },
      historyColumns: [
        {
          title: "序号",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.historySearch.page - 1) * this.historySearch.size +
                1
            );
          }
        },
        {
          title: "年份",
          key: "dhyear",
          width: 80
        },
        {
          title: "月份",
          key: "dhmonth",
          width: 90
        },
        {
          title: "语言",
          slot: "ltypeSlot",
          width: 90
        },
        {
          title: "内容",
          key: "content"
        },
        {
          title: "创建人",
          key: "createname",
          width: 120
        },
        {
          title: "创建时间",
          slot: "createtimeSlot",
          width: 200
        },
        {
          title: "操作",
          slot: "actionSlot",
          width: 150
        }
      ],
      historyAddForm: {
        show: false,
        date: new Date(),
        content: "",
        ltype: 1
      },
      addFormRules: {
        content: [
          {
            required: true,
            message: "内容不能为空",
            trigger: "blur"
          }
        ]
      },
      historyModifyForm: {
        show: false,
        date: null,
        content: ""
      },
      modifyFormRules: {
        content: [
          {
            required: true,
            message: "内容不能为空",
            trigger: "blur"
          }
        ]
      },
      userInfo: {}
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("xhWebAdminUser"));
    this.getHistoryList();
  },
  methods: {
    searchList() {
      this.historySearch.page = 1;
      this.getHistoryList();
    },
    getHistoryList() {
      dh_list({
        page: this.historySearch.page,
        size: this.historySearch.size,
        dhyear: this.historySearch.dhyear.getFullYear(),
        ltype: this.historySearch.ltype
      })
        .then((data) => {
          if (data.code === 0) {
            this.historySearch.total = data.obj.total;
            this.historySearch.list = data.obj.list;
          } else {
            this.historySearch.total = 0;
            this.historySearch.list = [];
            this.$Message.error(data.msg);
          }
        })
        .catch(() => {});
    },
    toDelHistory(dhid) {
      this.$Modal.confirm({
        title: "提示",
        content: "您确定删除选中数据吗?",
        onOk: () => {
          dh_remove({ dhid }).then((res) => {
            if (res.code === 0) {
              this.$Message.success(res.msg);
              this.searchList();
            }
          });
        },
        onCancel: () => {}
      });
    },
    toAdd() {
      this.historyAddForm = {
        show: true,
        date: new Date(),
        content: "",
        ltype: this.historySearch.ltype
      };
    },
    toSaveAdd() {
      this.$refs.historyAddForm.validate((valid) => {
        if (valid) {
          dh_save({
            dhyear: this.historyAddForm.date.getFullYear(),
            dhmonth: this.historyAddForm.date.getMonth() + 1 + "月",
            content: this.historyAddForm.content,
            ltype: this.historyAddForm.ltype,
            createid: this.userInfo.userid
          }).then((data) => {
            if (data.code === 0) {
              this.historyAddForm.show = false;
              this.$Message.success(data.msg);
              this.searchList();
            } else {
              this.$Message.error(data.msg);
            }
          });
        }
      });
    },
    toModifyHistory(user) {
      let _date = new Date();
      _date.setFullYear(user.dhyear);
      _date.setMonth(parseInt(user.dhmonth) - 1);
      this.historyModifyForm = {
        show: true,
        dhid: user.dhid,
        content: user.content,
        date: _date
      };
    },
    toSaveModifyHistory() {
      this.$refs.historyModifyForm.validate((valid) => {
        if (valid) {
          dh_update({
            dhyear: this.historyModifyForm.date.getFullYear(),
            dhmonth: this.historyModifyForm.date.getMonth() + 1 + "月",
            content: this.historyModifyForm.content,
            dhid: this.historyModifyForm.dhid
          }).then((data) => {
            if (data.code === 0) {
              this.historyModifyForm.show = false;
              this.$Message.success(data.msg);
              this.searchList();
            } else {
              this.$Message.error(data.msg);
            }
          });
        }
      });
    },
    changePage(page) {
      this.historySearch.page = page;
      this.getHistoryList();
    }
  }
};
</script>

<style scoped lang="less">
.searchBox {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
}
.foot_page {
  padding: 16px 0;
  text-align: right;
}
</style>
