<template>
  <div class="law-wrapper">
    <div class="law-tools-wrapper">
      <el-button type="primary" @click="addLawDialogShow">新增</el-button>
      <el-button type="warning" :disabled="isEditable" @click="editLaw">编辑</el-button>
      <el-button type="danger" :disabled="isDeleteable" @click="deleteLaw">删除</el-button>
    </div>
    <div class="law-search-wrapper">
      <el-date-picker
        v-model="inputDate"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-input v-model="keyword" style="width: 200px;margin-left: 20px;" placeholder="请输入关键字" />
      <el-input v-model="publishPerson" style="width: 200px;margin-left: 20px;" placeholder="请输入发布人" />
      <el-button type="primary" style="margin-left: 20px;" @click="searchLaw">搜索</el-button>
    </div>
    <div class="law-table-wrapper">
      <el-table
        :data="lawList"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="lawTitle"
          label="标题"
        />
        <el-table-column
          prop="lawPublisher"
          label="发布部门"
        />
        <el-table-column
          prop="lawDate"
          label="发布时间"
        />
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="curPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalColumn"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="新增法律法规"
      :visible.sync="addLawDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        ref="addform"
        :model="formInfo"
        :rules="rules"
      >
        <el-form-item label="法律法规标题" :label-width="'120px'" prop="title">
          <el-input v-model="formInfo.title" />
        </el-form-item>
        <el-form-item label="发布部门" :label-width="'120px'" prop="depart">
          <el-input v-model="formInfo.depart" :maxlength="50" style="width: 500px" />
        </el-form-item>
        <el-form-item label="发布时间" :label-width="'120px'" prop="time">
          <el-date-picker
            v-model="formInfo.time"
            type="datetime"
            placeholder="选择发布时间"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="publishLaw">发布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 获取法律法规
import { getLawList, deleteLaw } from '@/api/teachManage'
import { parseTime } from '@/utils/index'
export default {
  data() {
    return {
      lawList: [
      ],
      multipleSelection: [],
      isEditable: true,
      isDeleteable: true,
      addLawDialog: false,
      formInfo: {
        title: '',
        depart: '',
        time: '',
        content: ''
      },
      ckEditorConfig: {},
      // 经发局列表
      departList: [
        {
          value: '经发局（应急局）',
          label: '经发局（应急局）'
        },
        {
          value: '建设局',
          label: '建设局'
        },
        {
          value: '市场监督管理局',
          label: '市场监督管理局'
        },
        {
          value: '生态环境局',
          label: '生态环境局'
        },
        {
          value: '商务局',
          label: '商务局'
        }
      ],
      rules: {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        depart: [
          {
            required: true,
            message: '请选择经管部门',
            trigger: 'change'
          }
        ],
        time: [
          {
            required: true,
            message: '请选择发布时间',
            trigger: 'change'
          }
        ]
      },
      //
      inputDate: '',
      publishPerson: '',
      keyword: '',
      currentPage: 1,
      curPageSize: 10,
      totalColumn: 40
    }
  },
  watch: {
    'formInfo.content': (newVal, oldVal) => {
      console.log(newVal, oldVal)
    },
    'inputDate': (newVal, oldVal) => {
      console.log(newVal, oldVal, 'hehexixi')
    }
  },
  mounted() {
    this.initLawList()
  },
  methods: {
    initLawList() {
      if (!(this.inputDate instanceof Array) && !this.publishPerson && !this.keyword) {
        getLawList(this.currentPage - 1, this.curPageSize).then(res => {
          this.lawList = res.content
        })
      } else {
        if (this.inputDate instanceof Array) {
          if (this.keyword && this.publishPerson) {
            getLawList(this.currentPage - 1, this.curPageSize, parseTime(new Date(this.inputDate[0])), parseTime(new Date(this.inputDate[1])), this.publishPerson, this.keyword).then(res => {
              this.lawList = res.content
            })
          } else if (this.keyword && !this.publishPerson) {
            getLawList(this.currentPage - 1, this.curPageSize, parseTime(new Date(this.inputDate[0])), parseTime(new Date(this.inputDate[1])), undefined, this.keyword).then(res => {
              this.lawList = res.content
            })
          } else if (!this.keyword && !this.publishPerson) {
            getLawList(this.currentPage - 1, this.curPageSize, parseTime(new Date(this.inputDate[0])), parseTime(new Date(this.inputDate[1])), undefined, undefined).then(res => {
              this.lawList = res.content
            })
          } else if (!this.keyword && this.publishPerson) {
            getLawList(this.currentPage - 1, this.curPageSize, parseTime(new Date(this.inputDate[0])), parseTime(new Date(this.inputDate[1])), this.publishPerson, undefined).then(res => {
              this.lawList = res.content
            })
          }
        } else {
          if (this.keyword && this.publishPerson) {
            getLawList(this.currentPage - 1, this.curPageSize, undefined, undefined, this.publishPerson, this.keyword).then(res => {
              this.lawList = res.content
            })
          } else if (this.keyword && !this.publishPerson) {
            getLawList(this.currentPage - 1, this.curPageSize, undefined, undefined, undefined, this.keyword).then(res => {
              this.lawList = res.content
            })
          } else if (!this.keyword && !this.publishPerson) {
            getLawList(this.currentPage - 1, this.curPageSize, undefined, undefined, undefined, undefined).then(res => {
              this.lawList = res.content
            })
          } else if (!this.keyword && this.publishPerson) {
            getLawList(this.currentPage - 1, this.curPageSize, undefined, undefined, this.publishPerson, undefined).then(res => {
              this.lawList = res.content
            })
          }
        }
      }
    },
    addLawDialogShow() {
      // this.addLawDialog = true
      // 跳转到法律法规编写页面
      this.$router.push({
        path: '/train/law/addlaw'
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.isEditable = true
      this.isDeleteable = true
      if (this.multipleSelection.length === 1) {
        this.isEditable = false
      }
      if (this.multipleSelection.length > 0) {
        this.isDeleteable = false
      }
    },
    publishLaw() {
      // 发布法律法规
      this.$refs['addform'].validate((valid) => {
        if (valid) {
          // 发布
          // 调用 axios
        } else {
          this.$message.error('请输入信息')
        }
      })
    },
    editLaw() {
      // 编辑法律法规
      // console.log(this.multipleSelection, 'editLaw')
      this.$store.dispatch('setLawItem', this.multipleSelection[0]).then(res => {
        console.log(this.$store.getters.curLawItem, 'this.$store.getters.curLawItem')
        this.$router.push({
          path: '/train/law/editlaw'
        })
      })
    },
    deleteLaw() {
      // 删除法律法规
      console.log(this.multipleSelection, 'deleteLaw')
      this.$confirm('此操作将删除选中的法律法规', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteLaw(this.multipleSelection.map(item => item.lawId)).then(res => {
          this.initLawList()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    searchLaw() {
      // 搜索
      this.initLawList()
    },
    handleSizeChange(val) {
      // 每页多少条
      this.curPageSize = val
      this.initLawList()
    },
    handleCurrentChange(val) {
      // 当前是多少页
      this.currentPage = val
      this.initLawList()
    }
  }
}
</script>

<style lang="scss">
  .law-wrapper {
    margin: 30px auto;
    width: 80%;
    box-shadow: 0 0 9px 1px #eee;
    border-radius: 20px;
    padding: 20px;
    .law-tools-wrapper {
      width: 80%;
      margin: 30px auto;
      box-shadow: 0 0 9px 1px #eee;
      border-radius: 10px;
      padding: 10px;
    }
    .law-search-wrapper {
      width: 80%;
      margin: 30px auto;
      box-shadow: 0 0 9px 1px #eee;
      border-radius: 10px;
      padding: 10px;
    }
    .law-table-wrapper {
      width: 80%;
      margin: 30px auto;
      box-shadow: 0 0 9px 1px #eee;
      border-radius: 15px;
      padding: 15px;
    }
  }
  .to-add-strip-wrapper {
    padding-left: 120px;
  }
  .law-search-wrapper {
    margin: 20px 0;
    display: flex;
  }
  .add-strips-wrapper {
    position: relative;
    padding-left: 120px;
    padding-right: 30px;
    margin: 20px 0;
    .add-strips-title {
      padding-left: 4px;
      font-size: 20px;
      line-height: 24px;
      letter-spacing: 4px;
      font-weight: 550;
      box-shadow: 1px 1px 1px 1.5px #eee;
      margin-bottom: 7px;
    }
    .add-strips-content {
      padding: 4px;
      line-height: 18px;
      border: 1px solid #eee;
    }
    .add-strips-dec {
      position: absolute;
      top: 0;
      right: 0;
      width: 25px;
      height: 25px;
      background: #F13C3C;
      border-radius: 50%;
      .add-strips-inner {
        position: absolute;
        width: 17px;
        height: 3px;
        background: white;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
</style>
