<template>
  <div>
    <div v-show="showSubmit==='0'">
      <div>
        <el-button size="mini"
                   type="default"
                   @click="versionCancel">返回</el-button>
        <el-button size="mini"
                   type="primary"
                   @click="loadData">刷新</el-button>
        <el-button size="mini"
                   type="primary"
                   @click="operHistoryShow">操作历史</el-button>
        <span style="margin-left:20px">{{customerName}}——{{clientTypeShow}}</span>
      </div>
      <el-row class="row"
              :gutter="20">
        <el-col :span="8">
          <el-card>
            <div slot="header"
                 class="clearfix">
              <span>线上版本</span>
              <div v-if="release"
                   style="float:right">
                <el-button class="btn_card"
                           size="mini"
                           type="primary"
                           @click="revertcoderelease">版本回退</el-button>
              </div>
            </div>
            <div>
              <div class="div_nodata"
                   :style="{height:rowHeight}"
                   v-if="release===null">当前客户没有线上版本</div>
              <el-form v-else
                       :style="{height:rowHeight}"
                       label-position="left"
                       block
                       class="form">
                <el-form-item :label-width="labelWidth"
                              label="版本号">
                  <span>{{ release.version }}</span>
                </el-form-item>
                <el-form-item :label-width="labelWidth"
                              label="发布时间">
                  <span>{{ release.releaseTime }}</span>
                </el-form-item>
                <el-form-item :label-width="labelWidth"
                              label="发布模式">
                  <span>{{ release.releaseTypeShow }}</span>

                </el-form-item>
                <el-form-item v-if="release.releaseType==='step'"
                              :label-width="labelWidth"
                              label="灰度值">
                  <span>{{ release.grayPercentage }}</span>
                </el-form-item>
                <el-form-item :label-width="labelWidth"
                              label="提审时间">
                  <span>{{ release.auditTime }}</span>
                </el-form-item>
                <el-form-item :label-width="labelWidth"
                              label="上传时间">
                  <span>{{ release.commitTime }}</span>
                </el-form-item>
                <el-form-item :label-width="labelWidth"
                              label="版本说明">
                  <span>{{ release.codeInfo }}</span>
                </el-form-item>

              </el-form>
            </div>

          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card>
            <div slot="header"
                 class="clearfix">
              <span>审核版本</span>
              <div v-if="audit"
                   style="float:right">
                <el-button v-if="audit.status==='auditing'||audit.status==='delay'"
                           class="btn_card"
                           size="mini"
                           type="primary"
                           @click="submitRecall">审核撤回</el-button>
                <!-- <el-button v-if="!audit.isSpeed&&(audit.status==='auditing'||audit.status==='delay')"
                           class="btn_card"
                           size="mini"
                           type="primary"
                           @click="speedupaudit">加急申请</el-button> -->

                <el-button v-if="audit.status==='audit_success'||audit.status==='release_failed'"
                           class="btn_card"
                           size="mini"
                           type="primary"
                           @click="issueCode">发布</el-button>

                <el-button v-if="audit.status==='audit_failed'"
                           class="btn_card"
                           size="mini"
                           type="primary"
                           @click="submitFailReasonShow">审核失败原因</el-button>
                <el-button v-if="audit.status==='audit_failed'||audit.status==='withdrawn'"
                           class="btn_card"
                           size="mini"
                           type="primary"
                           @click="submitCodeRejectShow">重新提审</el-button>
              </div>
            </div>
            <div>
              <div v-if="audit===null"
                   class="div_nodata"
                   :style="{height:rowHeight}">当前客户没有审核版本</div>
              <el-form v-else
                       :style="{height:rowHeight}"
                       label-position="left"
                       block
                       class="form">
                <el-form-item :label-width="labelWidth"
                              label="版本号">
                  <span>{{ audit.version }}</span>
                </el-form-item>

                <el-form-item :label-width="labelWidth"
                              label="提审时间">
                  <span>{{ audit.auditTime }}</span>
                </el-form-item>
                <el-form-item :label-width="labelWidth"
                              label="上传时间">
                  <span>{{ audit.commitTime }}</span>
                </el-form-item>
                <!-- <el-form-item :label-width="labelWidth"
                              label="是否加急">
                  <span>{{ audit.isSpeedShow }}</span>
                </el-form-item> -->
                <el-form-item :label-width="labelWidth"
                              label="审核状态">
                  <span>{{ audit.statusShow }}</span>
                </el-form-item>
                <el-form-item :label-width="labelWidth"
                              label="版本说明">
                  <span>{{ audit.codeInfo }}</span>
                </el-form-item>

              </el-form>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card>
            <div slot="header"
                 class="clearfix">
              <span>开发版本</span>
              <el-button class="btn_card"
                         size="mini"
                         type="primary"
                         @click="commitCodeShow">上传代码</el-button>
              <el-button v-if="commit"
                         class="btn_card"
                         size="mini"
                         type="primary"
                         @click="QRCodeShow">二维码</el-button>
              <el-button v-if="commit"
                         class="btn_card"
                         size="mini"
                         type="primary"
                         @click="submitCodeShow">提交审核</el-button>
            </div>
            <div>
              <div v-if="commit===null"
                   class="div_nodata"
                   :style="{height:rowHeight}">当前客户没有开发版本</div>
              <el-form v-else
                       :style="{height:rowHeight}"
                       label-position="left"
                       block
                       class="form">
                <el-form-item :label-width="labelWidth"
                              label="版本号">
                  <span>{{ commit.version }}</span>
                </el-form-item>
                <el-form-item :label-width="labelWidth"
                              label="上传时间">
                  <span>{{ commit.commitTime }}</span>
                </el-form-item>
                <el-form-item :label-width="labelWidth"
                              label="版本说明">
                  <span>{{ commit.codeInfo }}</span>
                </el-form-item>

              </el-form>
            </div>
          </el-card>

        </el-col>

      </el-row>
    </div>
    <commit-form ref="ref_commit_form"
                 :optionData="optionData"
                 @refresh="refresh"></commit-form>

    <submit-form v-show="showSubmit==='1'"
                 ref="ref_submit_form"
                 @okSubmit="okSubmit('0')"
                 @cancleSubmit="cancleSubmit('0')"></submit-form>

    <submit-form-reject v-show="showSubmit==='2'"
                        ref="ref_submit_form_reject"
                        @okSubmit="okSubmit('0')"
                        @cancleSubmit="cancleSubmit('0')"></submit-form-reject>

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

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

    <c-dialog :modal-append-to-body="false"
              :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>

    <c-dialog :title="'分阶段发布'"
              :width="40"
              :dialogHeight="0.5"
              :visible="grayreleaseDia.visible"
              @cancel="grayreleaseDiaCancel"
              @ok="grayreleaseOk">
      <div style="text-align:center;margin-top:40px">灰度（%）：
        <el-input-number v-model="grayPercentage"
                         :min="0"
                         :max="100"
                         label="灰度百分比"></el-input-number>

        <div class="el-upload__tip"
             style="margin-top:20px">灰度的百分比 1 ~ 100 的整数，控制发布的节奏，避免一上线就影响到所有的用户</div>
      </div>
    </c-dialog>
  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import SubmitForm from './SubmitForm'
import SubmitFormReject from './SubmitFormReject'
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 {
      loading: false,
      labelWidth: '100px',
      // customerId: '', // 客户id 父组件传
      // clientType: '', // 小程序类型 父组件传
      params: {
        customerId: '',
        clientType: ''
      },
      customerName: '',
      clientTypeShow: '',
      optionData: {},
      // release: {
      //   codeId: '',
      //   version: '1.0.3',
      //   codeInfo: '版本1111111已经上线的版本版本1111111已经上线的版本版本1111111已经上线的版本版本1111111已经上线的版本版本1111111已经上线的版本版本1111111已经上线的版本',
      //   commitTime: '2020-08-07 10:00:00',
      //   auditTime: '2020-08-07 10:00:00',
      //   releaseTime: '2020-08-07 10:00:00',
      //   releaseType: 'step',
      //   releaseTypeShow: '全量',
      //   grayPercentage: 10
      // },
      release: null,
      // audit: {
      //   codeId: '',
      //   version: '1.0.2',
      //   codeInfo: '版本1111111已经上线的版本',
      //   commitTime: '2020-08-07 10:00:00',
      //   auditTime: '2020-08-07 10:00:00',
      //   status: 'auditing',
      //   statusShow: '审核中'
      // },
      audit: null,
      // commit: {
      //   codeId: '',
      //   version: '1.0.2',
      //   codeInfo: '版本1111111已经上线的版本',
      //   commitTime: '2020-08-07 10:00:00'
      // },
      commit: null,

      // 提交审核相关  0 版本页面   1 提交审核页面   2 审核驳回后提交页面
      showSubmit: '0',
      // 操作历史弹出框相关
      operDia: {
        visible: false
      },
      // 二维码弹出框相关
      qrCodeDia: {
        visible: false
      },
      src: '',
      // 分阶段发布弹出框相关
      grayreleaseDia: {
        visible: false
      },
      grayPercentage: 50 // 灰度的百分比 1 ~ 100 的整数
    }
  },
  components: {
    CDialog, SubmitForm, CommitForm, OperHistory, SubmitFailReason, SubmitFormReject
  },
  mounted () {

  },
  computed: {
    rowHeight () {
      return (this.clientHeight - 280) + 'px'
    },
    ...mapGetters(['clientHeight'])
  },
  methods: {
    initData (customerId, clientType, customerName, optionData) {
      this.params = { customerId, clientType }
      this.customerName = customerName
      this.clientTypeShow = clientType === 'resi' ? '居民端' : '工作端'
      this.optionData = optionData

      this.loadData()
    },

    // 刷新
    refresh () {
      this.loadData()
    },

    // 加载数据
    loadData () {
      // const url = '/third/code/version'
      const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/version'

      this.startLoading()
      window.app.ajax.post(url, this.params,
        (data, rspMsg) => {
          // eslint-disable-next-line
          // debugger

          this.release = data.release
          if (this.release) {
            if (this.release.releaseType === 'step') {
              this.release.releaseTypeShow = '分阶段'
            } else {
              this.release.releaseTypeShow = '全量'
            }
          }

          this.audit = data.audit
          // this.audit.status = 'audit_failed'
          if (this.audit) {
            // 审核状态 审核中:auditing;审核成功;audit_success;审核被拒绝;audit_failed;已撤回:withdrawn;审核延后:delay
            if (this.audit.status === 'auditing') {
              this.audit.statusShow = '审核中'
            } else if (this.audit.status === 'audit_success') {
              this.audit.statusShow = '审核成功'
            } else if (this.audit.status === 'audit_failed') {
              this.audit.statusShow = '审核被拒绝'
            } else if (this.audit.status === 'withdrawn') {
              this.audit.statusShow = '已撤回'
            } else if (this.audit.status === 'release_failed') {
              this.audit.statusShow = '发布失败'
            } else {
              this.audit.statusShow = '审核延后'
            }

            // if (this.audit.isSpeed) {
            //   this.audit.isSpeedShow = '加急'
            // } else {
            //   this.audit.isSpeedShow = '不加急'
            // }
          }

          this.commit = data.commit
          this.endLoading()
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })
    },

    // 取消
    versionCancel () {
      this.$emit('cancelVersion')
    },

    // 打开操作历史
    operHistoryShow () {
      this.$refs['ref_oper_history'].initData(this.params)
    },
    // 打开上传代码窗口
    commitCodeShow () {
      this.$nextTick(() => {
        // let dataForm = {
        //   clientType: 'resi',
        //   customerId: customerId
        // }
        this.$refs['ref_commit_form'].initData(this.params, this.optionData)
      })
    },

    // 打开体验版二维码
    QRCodeShow () {
      this.qrCodeDia.visible = true
      const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/qrcode'
      // const url = '/third/code/qrcode'
      const param = {
        codeId: this.commit.codeId
      }
      this.startLoading()
      window.app.ajax.post(url, param,
        (data, rspMsg) => {
          // // eslint-disable-next-line
          // debugger
          this.endLoading()
          if (data) {
            this.src = data.qrcode
          }
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        }, { headers: { 'Content-Type': 'image/jpeg' } })
    },
    // 打开提交审核窗口
    submitCodeShow () {
      this.showSubmit = '1'
      this.$refs['ref_submit_form'].initData(this.commit.codeId)
    },
    // 审核驳回 打开提交审核窗口
    submitCodeRejectShow () {
      if (this.audit.status === 'audit_failed') {
        this.showSubmit = '2'//显示重新提审div
        // this.$refs['ref_submit_form_reject'].initData(this.audit.codeId, this.audit.isSpeed)
        this.$refs['ref_submit_form_reject'].initData(this.audit.codeId, false)
      } else {
        this.showSubmit = '1'//显示提审div
        this.$refs['ref_submit_form'].initData(this.audit.codeId)
      }
    },

    // 提交审核提交成功返回
    okSubmit (type) {
      this.showSubmit = type
      this.refresh()
    },

    // 提交审核取消返回
    cancleSubmit (type) {
      this.showSubmit = type
    },

    // 审核撤回
    submitRecall () {
      this.$confirm('单个帐号每天审核撤回次数最多不超过 1 次，一个月不超过 10 次，确认撤回审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/undo'
        // const url = '/third/code/undo'
        const param = {
          codeId: this.audit.codeId
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('审核撤回成功' + rspMsg)
            this.refresh()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
      }).catch(() => {

      })
    },

    // 发布
    issueCode () {
      this.$confirm('确认发布?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/release'
        // const url = '/third/code/release'
        const param = {
          codeId: this.audit.codeId
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('发布成功' + rspMsg)
            this.refresh()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
      }).catch(() => { })
    },
    // 打开审核失败原因
    submitFailReasonShow () {
      this.$refs['ref_submit_fail_reason'].initData(this.audit.codeId)
    },

    // 分阶段发布
    grayrelease () {
      this.selCodeId = this.release.codeId
      this.grayreleaseDia.visible = true
    },
    grayreleaseOk () {
      // eslint-disable-next-line
      // debugger
      const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/grayrelease'
      const param = {
        codeId: this.selCodeId,
        grayPercentage: this.grayPercentage
      }
      this.startLoading()
      window.app.ajax.post(url, param,
        (data, rspMsg) => {
          this.grayreleaseDia.visible = false

          this.endLoading()
          this.refresh()
          if (data) {
            this.src = data.qrcode
          }
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        }, { headers: { 'Content-Type': 'image/jpeg' } })
    },
    // 加急申请
    speedupaudit () {
      this.$confirm('加急审核一年3次，不加急：预计在1-7天内完成，加急：预计再2-12小时内完成，确认加急审核？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.startLoading()
        const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/speedupaudit'
        // const url = '/third/code/speedupaudit'
        const param = {
          codeId: this.audit.codeId
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('加急申请成功' + rspMsg)
            this.refresh()
          },
          (rspMsg, data) => {
            this.endLoading()
            this.$message.error(rspMsg)
          })
      }).catch(() => { })
    },
    // 版本回退
    revertcoderelease () {
      this.$confirm('确认回退到上一版本？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'https://epmet-cloud.elinkservice.cn/api/third/code/revertcoderelease'
        // const url = '/third/code/revertcoderelease'
        const param = {
          codeId: this.release.codeId
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('回退成功' + rspMsg)
            this.refresh()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
      }).catch(() => { })
    },

    operDiaCancel () {
      this.operDia.visible = false
    },
    qrCodeDiaCancel () {
      this.qrCodeDia.visible = false
    },
    grayreleaseDiaCancel () {
      this.grayreleaseDia.visible = false
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  props: {
  }
}
</script>
<style scoped >
.btn_card {
  float: right;
  margin: 0 0 0 5px;
}
/* .div_nodata {
} */
.clearfix {
  height: 25px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-row {
  /* margin-bottom: 20px; */
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: 50px;
}
.form {
  overflow-y: auto;
}
</style>
