<template>
  <div>
    <!--开关盒子-->
    <div class="topBox">
      <el-row :gutter="20">
        <el-col class="itemList" v-for="item in itemList" :span="6">
          <div>
            <span>{{item.name}}:</span>
            <el-button v-if="item.status === 0" size="mini" type="primary" plain @click="open(item)">申请开启
            </el-button>
            <el-button v-else size="mini" type="warning" plain @click="close(item)">申请关闭</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--表格-->
    <div class="tableBox">
      <el-row>
        <el-col>
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="init()">刷新</el-button>
        </el-col>
      </el-row>

      <el-table :data="tableData" ref="xTable" highlight-current-row :row-class-name="rowClassName">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="operDetail" label="操作">
          <template slot-scope="scope">
            {{ strStatus[scope.row.operDetail] }}
          </template>
        </el-table-column>
        <el-table-column prop="applicant" label="申请人" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{ strategyStatus[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="applyReason" label="申请原因" />
        <el-table-column prop="createTime" label="申请时间" />
        <el-table-column prop="modifyTime" label="审核时间" />

        <el-table-column label="操作">
          <template slot-scope="scope">
            <template v-if="userName === '系统管理员' || userName === '李彤'">
              <el-button v-show="scope.row.status === 1" @click="audit(scope.row, {status:3})">通过</el-button>
              <el-button v-show="scope.row.status === 1"  @click="audit(scope.row, { status: 4 })">驳回</el-button>
            </template>
            <template v-if="userName === scope.row.applicant && scope.row.status === 1">
              <el-button @click="audit(scope.row, { status: 2 })">撤回</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNo" :limit.sync="searchForm.pageSize" @pagination="init" />
    </div>

    <!--申请原因-->
    <vxe-modal v-model="value5" width="60%" :title='this.strStatus[form.operDetail]+form.name'>
      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入申请原因" v-model="form.applyReason">
      </el-input>
      <el-row style="margin-top: 30px;display: flex;justify-content: flex-end">
        <el-button @click="value5 = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-row>
    </vxe-modal>

  </div>

</template>

<script>
import { listSchemeGlobal, listItem, addapplication } from './api'
import { put } from '@/api/common'
import getTime from "@/utils/getTime.js";

export default {
  name: 'Index',
  data () {
    return {
      //搜索相关
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        totalResult: 0
      },
      // 表格数据
      loading: false,
      total: 100,
      tableData: [],
      itemList: [],
      strategyStatus: ['--', '待审核', '撤回', '通过', '驳回'],
      strStatus: ['申请关闭', '申请开启'],
      userName: '',
      form: {
        applicant: "",
        id: 0,
        applyReason: "",
        infoId: "",
        name: "",
        operDetail: 1,
        status: "",
        applyReason: '',
        tag: "",
      },
      value5: false
    }
  },
  created () {
    this.userName = this.$store.state.user.name
  },
  mounted () {
    this.init()
    this.getItemList()
  },
  methods: {
    // 改变页码触发
    pagination (page) {
      this.pageNo = page.page;
      // 重新获取列表数据
      this.init();
    },
    // 提交申请
    onSubmit () {
      this.$confirm('确定提交申请么, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(this.form)
        addapplication(this.form).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 3000,
            offset: 360
          })
          this.value5 = false
          this.init()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      });
    },
    // 控制项列表
    getItemList () {
      listSchemeGlobal({ pageNo: 1, pageSize: 100, }).then(res => {
        this.itemList = res.data.list
      })

    },
    // 审核列表
    init () {
      listItem(this.searchForm).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
        this.searchForm.totalResult = res.data.total
        this.tableData.forEach((item) => {
          item.createTime = getTime(item.createTime);
        });

      })
    },
    getTimeStr (timeStamp) {
      var now = new Date(timeStamp),
        y = now.getFullYear(),
        m = ("0" + (now.getMonth() + 1)).slice(-2),
        d = ("0" + now.getDate()).slice(-2);
      return y + "-" + m + "-" + d + " " + now.toTimeString().substr(0, 8);
    },
    // 新增打开申请
    open (row) {
      this.form = {
        applicant: this.userName,
        applyReason: "",
        infoId: row.id,
        name: row.name,
        operDetail: 1,
        status: 1,
        tag: row.tag,
        id: row.id
      }
      this.value5 = true
    },
    // 新增关闭申请
    close (row) {
      this.form = {
        applicant: this.userName,
        applyReason: "",
        infoId: row.id,
        name: row.name,
        operDetail: 0,
        status: 1,
        tag: row.tag,
        id: row.id
      }
      this.value5 = true
    },


    // 新增关闭申请
    audit (row, obj) {

      this.$confirm(`确定${this.strategyStatus[obj.status]}该申请么, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let update = {

          name: row.name,
          status: obj.status,
          tag: row.tag,
          id: row.id
        }

        put('/record/strategy-global-record/update', update).then(res => {
          console.log(update)
          put('/strategy/global-info/update', update).then(res => {
            console.log(res)
            this.$message({
              message: "操作成功",
              type: 'success',
              duration: 3000,
              offset: 360
            })
            this.getItemList()
          })
          this.init()


        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },



    // 行颜色
    rowClassName ({ row, rowIndex }) {

      if (row.status === 1) {
        return 'row-green'
      }
    }

  }
}
</script>

<style lang="scss">
.searchBox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  padding: 10px 10px;

  form {
    margin: auto;

    .el-form-item {
      margin: 5px 5px;
    }
  }
}

.topBox {
  padding: 20px;

  .itemList {
    padding: 10px 0;
  }
}

.tableBox {
  padding: 20px;
  margin-top: 10px;
  background-color: #fff;
  box-shadow: #bfbfbf 0 0 1px;

  .row-green {
    color: #e07010;
    font-weight: 600;
  }

  .block {
    .el-pagination {
      margin-top: 30px;
      float: right;
    }
  }
}
</style>
