<template>
  <div class="apply">
    <el-form :inline="true" size="small">
      <el-form-item label="审核状态">
        <el-select v-model="searchForm.auditStatus" clearable>
          <el-option label="全部" :value="''"></el-option>
          <el-option label="待审核" :value="0"></el-option>
          <el-option label="审核通过" :value="1"></el-option>
          <el-option label="审核拒绝" :value="2"></el-option>
          <el-option label="审核锁定" :value="3"></el-option>
          <el-option label="作废" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核类型">
        <el-select v-model="searchForm.businessType" clearable>
          <el-option label="全部" :value="''"></el-option>
          <el-option label="活动类型" :value="1"></el-option>
          <el-option label="产品转接" :value="3"></el-option>
          <el-option label="产品权限" :value="4"></el-option>
          <el-option label="流量数据同步" :value="5"></el-option>
          <el-option label="订购同步" :value="6"></el-option>
          <el-option label="产品互斥" :value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="getTemInfo()">搜索</el-button>
        <el-button size="mini" plain icon="el-icon-refresh" @click="init()">重置</el-button>
      </el-form-item>
    </el-form>

    <div style="margin:30px auto">
      <el-table max-height="700" border highlight-current-row :data="tableData"
        :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }" style="width: 100%;">
        <el-table-column prop="businessName" label="审核名称" />
        <el-table-column label="发起人" width="150">
          <template slot-scope="scope">
            <span>
              {{ getUser(scope.row.createId) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="发起时间">
          <template slot-scope="scope">
            <span>
              {{ filterTime(scope.row.createTime) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="审核类型">
          <template slot-scope="scope">
            <span v-if="scope.row.businessType == 1">活动审核</span>
            <span v-if="scope.row.businessType == 3">产品转接</span>
            <span v-if="scope.row.businessType == 4">产品权限</span>
            <span v-if="scope.row.businessType == 5">流量数据同步</span>
            <span v-if="scope.row.businessType == 6">订购同步</span>
            <span v-if="scope.row.businessType == 7">产品互斥</span>
          </template>
        </el-table-column>
        <el-table-column label="审核模板">
          <template slot-scope="scope">
            <span>{{ templateName(scope.row.templateId) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.auditStatus == 0">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.auditStatus == 1">审核通过</el-tag>
            <el-tag type="danger" v-if="scope.row.auditStatus == 2">审核拒绝</el-tag>
            <el-tag type="warning" v-if="scope.row.auditStatus == 3">审核锁定</el-tag>
            <el-tag type="info" v-if="scope.row.auditStatus == 4">作废</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="审核进度">
          <template slot-scope="scope">
            <el-button type="text" @click="schedule(scope.row)">查看进度</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.auditStatus == 0">
              <el-button type="text" @click="pass(scope.row)">通过</el-button>
              <el-button type="text" @click="reject(scope.row)">拒绝</el-button>
            </div>

          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="searchForm.pageSize">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="审核进度" :visible.sync="show" width="60%" top="5vh">
      <div style="height: 300px; overflow: auto;">
        <div v-if="businessType == 1">
          <activityInfo :detailInfo="detailInfo" />
        </div>

        <div v-else-if="businessType == 3">
          <productSwitch :detailInfo="detailInfo" />
        </div>
        <div v-else-if="businessType == 4">
          <productPower :detailInfo="detailInfo" />
        </div>
        <div v-else-if="businessType == 5">
          <dataSync :detailInfo="detailInfo" />
        </div>
        <div v-else-if="businessType == 6">
          <orderSync :detailInfo="detailInfo" />
        </div>
        <div v-else-if="businessType == 7">
          <mutualModal :detailInfo="detailInfo" />
        </div>
      </div>


      <div style="margin:30px auto;height: 360px; overflow: auto;">
        <h3>审核进度</h3>
        <el-table height="300" border highlight-current-row :data="examineUserList"
          :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }" style="width: 100%;">
          <el-table-column prop="approverName" label="审核名称" />
          <el-table-column label="审核状态">
            <template slot-scope="scope">
              <!-- <span v-if="scope.row.auditStatus == 0">待审核</span>
              <span v-if="scope.row.auditStatus == 1">审核通过</span>
              <span v-if="scope.row.auditStatus == 2">审核拒绝</span>
              <span v-if="scope.row.auditStatus == 3">审核锁定</span>
              <span v-if="scope.row.auditStatus == 4">作废</span> -->

              <el-tag v-if="scope.row.auditStatus == 0">待审核</el-tag>
              <el-tag type="success" v-if="scope.row.auditStatus == 1">审核通过</el-tag>
              <el-tag type="danger" v-if="scope.row.auditStatus == 2">审核拒绝</el-tag>
              <el-tag type="warning" v-if="scope.row.auditStatus == 3">审核锁定</el-tag>
              <el-tag type="info" v-if="scope.row.auditStatus == 4">作废</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="审核时间">
            <template slot-scope="scope">
              <span v-if="scope.row.updateTime != null && scope.row.updateTime != ''">{{ filterTime(scope.row.updateTime)
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="auditRemark" label="审核备注" />

        </el-table>
      </div>
    </el-dialog>
    <!-- 填写拒绝原因 -->
    <el-dialog title="拒绝原因" :visible.sync="rejectShow" width="30%">
      <!-- <el-form>
      <el-form-item label=""></el-form-item>
     </el-form> -->
      <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" placeholder="请输入拒绝原因" v-model="rejectForm.remark">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectShow = false">取 消</el-button>
        <el-button type="primary" @click="rejectClick">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { post, get } from "@/api/common";
import { mapState } from 'vuex';
import activityInfo from './components/activityInfo.vue'
import productSwitch from './components/productSwitch.vue'
import productPower from './components/productPower.vue'
import dataSync from './components/dataSync.vue'
import orderSync from './components/orderSync.vue'
import mutualModal from './components/mutual.vue'
export default {
  data () {
    return {
      userList: [],
      tableData: [],
      searchForm: {
        pageSize: 10,
        pageNum: 1,
        auditStatus: '',
        approverId: "",
        businessType: ""
      },
      show: false,
      rejectShow: false,
      total: 0,
      templateList: [],
      detailInfo: {},
      examineUserList: [],
      rejectForm: {
        approverId: "",
        auditLogId: "",
        remark: "",
        auditLogApproverId: "",
        templateLevel: ""
      },
      businessType: null
    }
  },
  computed: {
    ...mapState(['user'])
  },
  components: {
    activityInfo,
    productSwitch,
    productPower,
    dataSync,
    orderSync,
    mutualModal
  },
  created () {
    this.getTemplate()
  },
  methods: {
    // 审核通过
    pass (row) {
      this.$confirm('是否进行审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let { approverId, auditLogId, templateLevel } = row
        let params = {
          approverId: approverId,
          auditLogId: auditLogId,
          templateLevel: templateLevel
        }
        post('/auditLog/pass', params).then(res => {
          if (res.code == 10000) {
            this.$message.success('审核成功!')
            this.getTemInfo()
          }
        })
      })

    },
    // 审核拒绝
    reject (row) {
      let { approverId, auditLogId, templateLevel, id } = row
      this.rejectForm = {
        approverId: approverId,
        auditLogId: auditLogId,
        templateLevel: templateLevel,
        auditLogApproverId: id
      }
      this.rejectShow = true
    },
    rejectClick () {
      this.$confirm('此操作将拒绝?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post('/auditLog/reject', this.rejectForm).then(res => {
          if (res.code == 10000) {
            this.rejectShow = false
            this.rejectForm.remark = ""
            this.getTemInfo()
          }
        })
      })
    },

    init () {
      this.searchForm = {
        pageSize: 10,
        pageNum: 1,
        auditStatus: ''
      }
      this.getTemInfo()
    },
    schedule (row) {
      this.businessType = row.businessType
      this.show = true
      post('/auditLog/getByBusinessId', { businessType: row.businessType, businessId: row.businessId }).then(res => {
        if (res.code == 10000) {
          this.detailInfo = res.data
        }
        console.log(res)
      })
      // if (row.businessId) {
      //   get('/campaign/get/' + row.businessId, { id: row.businessId }).then(res => {
      //     this.detailInfo = res.data

      //   })
      // }
      post('/auditLog/page', { pageNum: 1, pageSize: 9999, auditLogId: row.auditLogId }).then(res => {
        this.examineUserList = res.data.records
      })

    },
    templateName (id) {
      let name = this.templateList.find(val => id == val.id)
      if (name != undefined) {
        return name.templateName
      } else {
        return '模板已删除'
      }
    },
    // 获取审核模板
    getTemplate () {
      post('/auditTemplate/page', { pageNum: 1, pageSize: 9999 }).then(res => {
        this.templateList = res.data.records
      })
    },
    filterTime (time) {
      if (time != '' && time != null) {
        var date = new Date(time) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate()
        var H = date.getHours()
        var mm = date.getMinutes()
        var ss = date.getSeconds()
        // return filter.unixTimeToDateTime(time)
        return Y + M + D + '  ' + H + ':' + mm + ':' + ss
      } else {
        return ''
      }

    },
    getUserList () {
      get("/sysUser/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
        this.userList = JSON.parse(JSON.stringify(res.data.list))
        res.data.list.forEach(val => {
          if (val.name == this.user.name) {
            // this.searchForm.createId = val.id
            this.searchForm.approverId = val.id
          }
        })
        this.getTemInfo()
      })
    },
    getTemInfo () {
      post('/auditLog/page', this.searchForm).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
      // this.searchForm.auditLogId = 5
      // post('/auditLog/page', this.searchForm).then(res => {
      //   console.log(res)
      //   // this.tableData = res.data.records
      // })
    },
    getUser (id) {
      let name = this.userList.find(val => id == val.id)
      if (name != undefined) {
        return name.name
      } else {
        return ''
      }
    },
    handleSizeChange (val) {
      this.searchForm.pageNum = 1
      this.searchForm.pageSize = val
      this.getTemInfo()
    },
    handleCurrentChange (val) {
      this.searchForm.pageNum = val
      this.getTemInfo()
    },
  },
  mounted () {
    this.getUserList()

  }
}
</script>

<style lang="scss" scoped>
.apply {
  padding: 20px !important;
}
</style>