<template>
  <div>
    <el-card shadow="never"
             class="aui-card--fill">
      <div class="mod-demo__demo}">

        <el-form :inline="true"
                 :model="tableParams">
          <el-form-item>
            <el-select v-model="tableParams.customerId"
                       placeholder="客户"
                       clearable>
              <el-option v-for="item in form.data['customerId']"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="tableParams.clientType"
                       placeholder="类型"
                       clearable>
              <el-option v-for="item in form.data['clientType']"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="tableParams.state"
                       placeholder="状态"
                       clearable>
              <el-option v-for="item in form.data['state']"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-date-picker v-model="tableParams.commitDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="发布开始日期"
                            end-placeholder="发布结束日期"
                            :default-value="new Date()"
                            value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item> -->
          <!-- <el-form-item>
            <el-date-picker v-model="tableParams.submitDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="审核开始日期"
                            end-placeholder="审核结束日期"
                            :default-value="new Date()"
                            value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item>
            <el-button @click="loadTableData()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="commitCodeDiaShow('')">上传代码</el-button>
          </el-form-item>
        </el-form>

        <c-table column-type="index"
                 ref="table"
                 :url="tableUrl"
                 :params="tableParams"
                 keyword="CommitCodeList"
                 :operations="operations"
                 :tableHeight="tableHeight"
                 @submitCodeDiaShow="submitCodeDiaShow"
                 @showQRCode="showQRCode"
                 @submitRecall="submitRecall"
                 @issueCode="issueCode"
                 @submitFailReason="submitFailReason"
                 @operHistory="operHistory">
        </c-table>

      </div>
    </el-card>

    <commit-form ref="ref_commit_form"
                 :optionData="form.data"
                 @refresh="refresh"></commit-form>

    <submit-form ref="ref_submit_form"
                 @refresh="refresh"></submit-form>

    <oper-history ref="ref_oper_history"></oper-history>

    <submit-fail-reason ref="ref_submit_fail_reason"></submit-fail-reason>

    <c-dialog :showFooter="false"
              :title="'二维码'"
              :width="40"
              :visible="qrCodeDia.visible"
              @cancel="qrCodeDiaCancel">
      <div style="text-align:center">
        <el-image style="width: 300px; height: 300px"
                  :src="src"></el-image>
        <div class="el-upload__tip">请用微信扫描二维码</div>
      </div>
    </c-dialog>
  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import CTable from '@c/CTable'
import SubmitForm from './SubmitForm'
import CommitForm from './CommitForm'
import OperHistory from './OperHistory'
import SubmitFailReason from './SubmitFailReason'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading// 加载动画

export default {
  data () {
    return {

      // 查询相关
      tableParams: {
        customerId: '', // 客户
        clientType: '', // 类型
        state: '', // 代码状态
        commitDate: '', // 发布日期
        submitDate: '', // 审核日期
        source: this.env
      },
      // 列表相关
      tableUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/uploadlist',
      // 列表操作栏的操作项数组
      operations: [
        {
          lable: '提交审核', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'submitCodeDiaShow', // 回调方法名称
          isShow: (row) => {
            if (row.status === 'unaudited' || row.status === 'audit_failed' || row.status === 'withdrawn') {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '二维码', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'showQRCode', // 回调方法名称
          isShow: (row) => {
            return true
            // if (row.status === 'unaudited') {
            //   return true
            // } else {
            //   return false
            // }
          }
        },
        {
          lable: '审核撤回', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'submitRecall', // 回调方法名称
          isShow: (row) => {
            if (row.status === 'auditing') {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '发布', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'issueCode', // 回调方法名称
          isShow: (row) => {
            if (row.status === 'audit_success' || row.status === 'release_failed') {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '审核失败原因', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'submitFailReason', // 回调方法名称
          isShow: (row) => {
            if (row.status === 'audit_failed') {
              return true
            } else {
              return false
            }
          }
        },
        {
          lable: '操作历史', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'operHistory',
          isShow: 'show'
        }
      ],
      // 操作历史弹出框相关
      operDia: {
        visible: false
      },
      // 二维码弹出框相关
      qrCodeDia: {
        visible: false
      },
      src: '',
      // 查询栏下拉框数据
      form: {
        dataUrl: [], // 下拉框/单选框/复选框等获取数据的url
        data: { // 全部下拉框数据
          clientType: [
            {
              value: 'resi',
              label: '居民端'
            },
            {
              value: 'work',
              label: '工作端'
            }
          ],
          state: [
            {
              value: 'unaudited',
              label: '未审核'
            },
            {
              value: 'auditing',
              label: '审核中'
            },
            {
              value: 'audit_success',
              label: '审核成功'
            },
            {
              value: 'audit_failed',
              label: '审核被拒绝'
            },
            {
              value: 'withdrawn',
              label: '已撤回'
            },
            {
              value: 'delay',
              label: '审核延后'
            },
            {
              value: 'release_success',
              label: '发布成功'
            },
            {
              value: 'release_failed',
              label: '发布失败'
            }
          ]
        }
      }
    }
  },
  components: {
    CDialog, SubmitForm, CommitForm, OperHistory, CTable, SubmitFailReason
  },
  activated () {
    let params = this.$route.params

    // 由客户注册信息跳转来
    if (params.showCommit) {
      this.form.data.customerId = params.customerList
      this.commitCodeDiaShow(params.customerId)
    }
    this.$nextTick(() => {
      this.$refs.table.doLayout() // 解决表格错位
    })
  },
  mounted () {
    this.renderSelData()
    this.loadTableData()
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 90
    },
    ...mapGetters(['clientHeight', 'env'])
  },
  methods: {
    // 刷新
    refresh () {
      this.loadTableData()
    },
    // 加载列表数据
    loadTableData () {
      this.tableParams.source = this.env
      this.$nextTick(() => {
        this.$refs.table.loadData() // 获取表格数据
      })
    },
    // 打开上传代码窗口
    commitCodeDiaShow (customerId) {
      this.$nextTick(() => {
        let dataForm = {
          clientType: 'resi',
          customerId: customerId
        }
        this.$refs['ref_commit_form'].initData(dataForm)
      })
    },

    // 提交审核
    submitCodeDiaShow (row) {
      let feedbackShow = false
      if (row.status === 'audit_failed') {
        feedbackShow = true
      }
      this.$refs['ref_submit_form'].initData(row.id, feedbackShow)
    },

    // 审核撤回
    submitRecall (row) {
      this.$confirm('确认撤回审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/undo'
        const param = {
          codeId: row.id
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('撤回成功' + rspMsg)
            this.refresh()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
        // this.$message({
        //   type: 'success',
        //   message: '删除成功!'
        // })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 体验版二维码
    showQRCode (row) {
      this.qrCodeDia.visible = true
      const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/qrcode'
      const param = {
        codeId: row.id
      }
      this.startLoading()
      window.app.ajax.post(url, param,
        (data, rspMsg) => {
          // // eslint-disable-next-line
          // debugger
          this.endLoading()
          if (data) {
            // console.log(data.qrcode)
            this.src = data.qrcode
          }
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        }, { headers: { 'Content-Type': 'image/jpeg' } })
    },
    // 发布
    issueCode (row) {
      const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/release'
      const param = {
        codeId: row.id
      }
      window.app.ajax.post(url, param,
        (data, rspMsg) => {
          this.$message.success(rspMsg)
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        })
    },
    // 审核失败原因
    submitFailReason (row) {
      this.$refs['ref_submit_fail_reason'].initData(row.id)
    },
    // 操作历史
    operHistory (row) {
      this.$refs['ref_oper_history'].initData(row.id)
    },

    operDiaCancel () {
      this.operDia.visible = false
    },
    qrCodeDiaCancel () {
      this.qrCodeDia.visible = false
    },
    async renderSelData () { // 渲染下拉框/单选框/复选框等数据
      const customerUrl = ' https://epmet-cloud.elinkservice.cn/api/third/pacustomer/registerbyauth'
      const param = {
        //  workAuth: 1,
        // resiAuth: 1,
        source: this.env,
        initState: 1
      }
      this.startLoading()
      await window.app.ajax.post(customerUrl, param,
        (data, rspMsg) => {
          this.endLoading()
          if (data) {
            let customerList = []

            data.forEach(element => {
              let oneObj = {
                value: element.customerId,
                label: element.customerName
              }
              customerList.push(oneObj)
            })

            this.form.data.customerId = customerList
            this.$forceUpdate()
          }
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  }
}
</script>
<style>
.el-upload__tip {
  color: rgb(155, 155, 155);
}
</style>
