<template>
  <div class="app-container">
    <!-- 头部搜索添加 -->
    <div class="filter-container">
      <el-input
        placeholder="政策标题"
        style="width: 190px; margin-right: 10px"
        class="filter-item"
        v-model="policyTitle"
      />
      <el-select
        v-model="policyType"
        placeholder="政策类型"
        clearable
        style="width: 190px"
        class="filter-item"
      >
        <el-option
          v-for="(item, index) in typeList"
          :key="index"
          :value="index"
        />
      </el-select>
      <el-select
        v-model="policyStatus"
        placeholder="审核状态"
        clearable
        class="filter-item"
        style="width: 190px; margin-left: 10px"
        value="1"
      >
        <el-option
          v-for="(item, index) in status"
          :key="index"
          :value="index"
        />
      </el-select>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-search"
        @click="Search"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="policyAdd"
      >
        添加
      </el-button>
    </div>
    <!-- 政策信息列表 -->
    <el-table
      v-loading="listLoading"
      :data="polictList"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="ID" prop="id" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="time" align="center" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.publishTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门" prop="depart" align="center" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.publishDepart }}</span>
        </template>
      </el-table-column>
      <el-table-column label="原文链接" prop="url" align="center" width="180">
        <template slot-scope="{ row }">
          <!-- <span>{{ row.titleUrl }} -->
          <a :href="row.titleUrl" target="_blank">点击此处跳转</a>
          <!-- </span> -->
        </template>
      </el-table-column>
      <el-table-column
        label="审核状态"
        prop="status"
        align="center"
        width="180"
      >
        <template slot-scope="{ row }">
          <!-- <span>{{ row.auditStatus }}</span> -->
          <el-tag
            v-if="row.auditStatus === 0"
            style="background: #ffbb77"
            type="published"
          >
            刚入库
          </el-tag>
          <el-tag v-if="row.auditStatus === 1" type="published">
            审核通过
          </el-tag>
          <el-tag
            v-if="row.auditStatus === 2"
            style="background: #ff5151; color: white"
            type="draft"
          >
            审核不通过
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button
            v-if="row.auditStatus === 2"
            size="mini"
            type="success"
            @click="handleModifyStatus(row, 1)"
          >
            通过
          </el-button>
          <el-button
            v-if="row.auditStatus === 1"
            size="mini"
            @click="handleModifyStatus(row, 2)"
          >
            未通过
          </el-button>
          <el-button
            v-if="row.auditStatus === 0"
            size="mini"
            type="success"
            @click="handleModifyStatus(row, 1)"
          >
            通过
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 显示当前页数，且显示所有页数，可以跳转 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="data.pageNum"
      :limit.sync="data.pageSize"
      @pagination="getList"
    />
    <!-- 修改政策界面 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 50%; margin-left: 50px"
      >
        <el-form-item label="政策标题" prop="title" style="width: 180%">
          <el-input v-model="temp.title" />
        </el-form-item>

        <el-form-item label="原文链接" prop="titleUrl" style="width: 180%">
          <el-input v-model="temp.titleUrl" />
        </el-form-item>

        <el-form-item label="图片路径" prop="imgUrl" style="width: 180%">
          <el-input v-model="temp.imgUrl" />
        </el-form-item>

        <el-form-item label="发布部门" prop="imgUrl" style="width: 180%">
          <el-cascader
            v-model="cascader"
            v-if="options.length > 0"
            :options="options"
            @change="handleChange"
            :props="{ value: 'id', label: 'areaName', children: 'next' }"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="原文内容" prop="content" style="width: 180%">
          <!-- <el-button @click="show111 = !show111">原文/编辑</el-button> -->
          <!-- <textarea v-if="show111 === false" style="width: 100%;height: 300px" v-text="temp.content" /> -->
          <div
            v-if="show111 === false"
            contentEditable="true"
            style="
              border: 1px solid #000;
              border-radius: 10px 0 0 10px;
              padding: 20px;
              background: #f5f5f5;
              height: 260px;
              overflow-y: auto;
            "
            v-html="temp.content"
          >
            '
          </div>
          <!-- <textarea id="content" name="content" /> -->
        </el-form-item>

        <el-form-item label="政策简介" prop="intro" style="width: 180%">
          <el-input v-model="temp.intro" />
        </el-form-item>

        <el-form-item label="政策标签" prop="intro" style="width: 180%">
          <el-button @click="addLabel">添加标签</el-button>
          <el-input
            style="margin-top: 4px"
            v-for="(item, index) in temp.projectLabels"
            :key="index"
            v-model="temp.projectLabels[index]"
          />
        </el-form-item>

        <el-form-item label="政策类型" prop="type">
          <el-select
            v-model="policyType1"
            placeholder="政策类型"
            clearable
            style="width: 190px"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :value="index"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="审核状态" prop="status">
          <el-select
            v-model="policyStatus1"
            placeholder="审核状态"
            clearable
            class="filter-item"
            style="width: 190px"
            value="1"
          >
            <el-option
              v-for="(item, index) in status"
              :key="index"
              :value="index"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="Commit"> 提交 </el-button>
      </div>
    </el-dialog>
    <!-- 添加政策界面 -->
    <el-dialog title="添加" :visible.sync="dialogFormVisible1">
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 50%; margin-left: 50px"
      >
        <el-form-item label="政策标题" prop="title" style="width: 180%">
          <el-input v-model="addPolicy.title" />
        </el-form-item>

        <el-form-item label="发布时间" prop="time" style="width: 180%">
          <!-- <el-input v-model="addPolicy.publishTime" placeholder="例如：2020/01/01" /> -->
          <el-date-picker
            id="Time"
            v-model="addPolicy.publishTime"
            type="date"
            placeholder="请选择时间"
          />
        </el-form-item>

        <el-form-item label="原文链接" prop="titleUrl" style="width: 180%">
          <el-input v-model="addPolicy.titleUrl" />
        </el-form-item>

        <el-form-item label="图片路径" prop="imgUrl" style="width: 180%">
          <el-input v-model="addPolicy.imgUrl" />
        </el-form-item>

        <el-form-item label="发布部门" prop="imgUrl" style="width: 180%">
          <el-cascader
            v-model="cascader1"
            v-if="options.length > 0"
            :options="options"
            @change="handleChange1"
            :props="{ value: 'id', label: 'areaName', children: 'next' }"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="原文内容" prop="content" style="width: 180%">
          <!-- <el-button @click="show111 = !show111">原文/编辑</el-button> -->
          <!-- <textarea v-if="show111 === false" style="width: 100%;height: 300px" v-text="temp.content" /> -->
          <div
            v-if="show111 === false"
            id="Content"
            contentEditable="true"
            style="
              border: 1px solid #000;
              border-radius: 10px 0 0 10px;
              padding: 20px;
              background: #f5f5f5;
              height: 260px;
              overflow-y: auto;
            "
            v-html="addPolicy.content"
          >
            '
          </div>
          <!-- <textarea id="content" name="content" /> -->
        </el-form-item>

        <el-form-item label="政策简介" prop="intro" style="width: 180%">
          <el-input v-model="addPolicy.intro" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false"> 取消 </el-button>
        <el-button type="primary" @click="CommitAdd"> 提交 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as api from '@/api/policy'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'Policy',
  components: { Pagination },
  data() {
    return {
      list: null,
      show111: false,
      total: 0,
      listLoading: true,
      cascader: '',
      cascader1: '',
      data: {
        title: '',
        auditStatus: '',
        pageNum: 1,
        pageSize: 20,
        type: ''
      },
      polictList: [],
      typeList: { 申报通知: 0, 公告公示: 1, 政策动态: 2, 申报指南: 3 },
      policyTitle: '',
      policyType: undefined,
      policyType1: undefined,
      policyStatus: undefined,
      policyStatus1: undefined,
      status: { 刚入库: 0, 审核通过: 1, 审核不通过: 2 },
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      dialogStatus: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      temp: {},
      addPolicy: {
        title: '',
        publishTime: '',
        titleUrl: '',
        imgUrl: '',
        content: '',
        intro: '',
        pushDep: ''
      },
      options: []
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  async created() {
    await this.getList()
    await api.getAreaBranch().then(res => {
      this.options = res
    })
  },
  methods: {
    handleChange(value) {
      this.temp.pushDep = value[value.length - 1]
      console.log(this.temp)
    },
    handleChange1(value) {
      this.addPolicy.pushDep = value[value.length - 1]
    },
    async Search() {
      const that = this
      that.listLoading = true
      that.data.title = that.policyTitle
      if (
        that.typeList[`${that.policyType}`] === undefined &&
        that.status[`${that.policyStatus}`] === undefined
      ) {
        that.data.type = ''
        that.data.auditStatus = ''
        await api.PolicyDetail(this.data).then(res => {
          that.polictList = res.list
          that.total = res.total - 0
          that.listLoading = false
        })
      } else if (that.typeList[`${that.policyType}`] === undefined) {
        that.data.type = ''
        that.data.auditStatus = that.status[`${that.policyStatus}`]
        await api.PolicyDetail(this.data).then(res => {
          that.polictList = res.list
          that.total = res.total - 0
          that.listLoading = false
        })
      } else if (that.status[`${that.policyStatus}`] === undefined) {
        that.data.type = that.typeList[`${that.policyType}`]
        that.data.auditStatus = ''
        await api.PolicyDetail(this.data).then(res => {
          that.polictList = res.list
          that.total = res.total - 0
          that.listLoading = false
        })
      } else {
        that.data.pageNum = 1
        that.data.type = that.typeList[`${that.policyType}`]
        that.data.auditStatus = that.status[`${that.policyStatus}`]
        await api.PolicyDetail(that.data).then(res => {
          that.polictList = res.list
          that.total = res.total - 0
          that.listLoading = false
        })
      }
    },
    async getList() {
      const that = this
      that.listLoading = true
      await api.PolicyDetail(that.data).then(res => {
        console.log(that.data)
        that.polictList = res.list
        that.total = res.total - 0

        setTimeout(() => {
          that.listLoading = false
        }, 1000)
      })
    },
    handleUpdate(row) {
      const that = this
      that.temp = Object.assign({}, row) // copy obj
      console.log(that.temp)
      that.temp.timestamp = new Date(that.temp.timestamp)
      that.dialogStatus = 'update'
      for (const key in that.typeList) {
        if (that.typeList[key] === that.temp.type) {
          that.policyType1 = key
        }
      }
      for (const key in that.status) {
        if (that.status[key] === that.temp.auditStatus) {
          that.policyStatus1 = key
        }
      }
      that.dialogFormVisible = true
      that.$nextTick(() => {
        that.$refs['dataForm'].clearValidate()
      })
    },
    async Commit() {
      const that = this
      that.temp.type = that.typeList[`${that.policyType1}`]
      that.temp.auditStatus = that.status[`${that.policyStatus1}`]
      for (let i = 0; i < that.temp.projectLabels.length; i++) {
        if (that.temp.projectLabels[i] === '') {
          that.temp.projectLabels.splice(i, 1)
          i -= 1
        }
      }
      await api.PolicyUpdate(that.temp).then(res => {
        this.getList()
        this.cascader = ''
        that.dialogFormVisible = false
      })
    },
    async handleModifyStatus(detail, num) {
      this.listLoading = true
      detail.auditStatus = num
      await api.PolicyUpdate(detail).then(res => {
        this.cascader = ''
        this.listLoading = false
      })
    },
    async handleDelete(id) {
      await api.PolicyDelete(id).then(res => {
        this.getList()
      })
    },
    policyAdd() {
      const that = this
      for (const key in that.addPolicy) {
        that.addPolicy[key] = ''
      }
      that.addPolicy.publishTime = new Date()
      that.dialogFormVisible1 = true
    },
    async CommitAdd() {
      const that = this
      var Content = document.getElementById('Content')
      var Time = document.getElementById('Time').value
      that.addPolicy.content = Content.innerHTML
      var str = Time.replace(/-/g, '/')
      that.addPolicy.publishTime = str
      for (const key in that.addPolicy) {
        if (that.addPolicy[key] === '') {
          alert(key + '不能为空')
          return
        }
      }
      api.PolicyAdd(that.addPolicy).then(res => {
        this.cascader1 = ''
        that.dialogFormVisible1 = false
      })
    },
    addLabel() {
      this.temp.projectLabels = this.temp.projectLabels.concat([''])
      console.log(this.temp.projectLabels)
    }
  }
}
</script>
