<template>
  <div>
    <el-card shadow="never"
             class="aui-card--fill">
      <div class="mod-demo__demo}">
        <el-form :inline="true"
                 :model="dataForm"
                 @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-select v-model="dataForm.client"
                       placeholder="客户">
              <el-option v-for="item in optionData['client']"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="dataForm.type"
                       placeholder="类型">
              <el-option v-for="item in optionData['type']"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="dataForm.state"
                       placeholder="状态">
              <el-option v-for="item in optionData['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="dataForm.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="dataForm.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="getDataList()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="commitCode()">上传代码</el-button>
          </el-form-item>
        </el-form>
        <el-table id="out-table"
                  ref="table"
                  :header-cell-style="{color:'#000'}"
                  :data="tableData"
                  :style="{width: '100%'}"
                  border
                  v-loading="loading"
                  element-loading-text="正在加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255, 255， 255, 0.8)">
          <!-- <el-table-column type="selection"
                         header-align="center"
                         align="center"
                         width="50"></el-table-column> -->
          <el-table-column prop="client"
                           label="客户"
                           min-width="100"
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="type"
                           label="类型"
                           min-width="50"
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="appId"
                           label="appId"
                           min-width="100"
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="version"
                           label="当前版本"
                           min-width="70"
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="desc"
                           label="描述"
                           min-width="130"
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="stateShow"
                           label="状态"
                           min-width="70"
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="commitDate"
                           label="上传时间"
                           header-align="center"
                           min-width="100"
                           align="center"></el-table-column>
          <el-table-column prop="submitDate"
                           label="提交审核时间"
                           min-width="100"
                           header-align="center"
                           align="center"></el-table-column>

          <el-table-column label="操作"
                           fixed="right"
                           header-align="center"
                           align="center"
                           width="300">
            <template slot-scope="scope">
              <el-button v-if="scope.row.state=='01'"
                         type="text"
                         size="small"
                         @click="submitCode(scope.row.id)">提交审核</el-button>
              <el-button v-if="scope.row.state=='01'"
                         type="text"
                         size="small"
                         @click="showQRCode(scope.row.id)">二维码</el-button>
              <el-button v-if="scope.row.state=='02'"
                         type="text"
                         size="small"
                         @click="submitRecall(scope.row.id)">审核撤回</el-button>
              <el-button v-if="scope.row.state=='03'"
                         type="text"
                         size="small"
                         @click="issueCode(scope.row.id)">发布</el-button>
              <el-button v-if="scope.row.state=='04'"
                         type="text"
                         size="small"
                         @click="submitFailReason(scope.row.id)">审核失败原因</el-button>
              <el-button type="text"
                         size="small"
                         @click="operHistory(scope.row.id)">操作历史</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="page"
                       :page-sizes="[10, 20, 50, 100]"
                       :page-size="limit"
                       :total="total"
                       layout="total, sizes, prev, pager, next, jumper"
                       @size-change="pageSizeChangeHandle"
                       @current-change="pageCurrentChangeHandle">
        </el-pagination>

      </div>
    </el-card>
    <c-dialog :title="commitDia.title"
              :visible="commitDia.visible"
              :showConfirm="false"
              @cancel="commitDiaCancel">
      <commit-form ref="ref_temp_list"></commit-form>
    </c-dialog>

    <c-dialog :title="submitDia.title"
              :visible="submitDia.visible"
              :dialogHeight="1.1"
              @cancel="submitDiaCancel">
      <submit-form ref="ref_submit_form"></submit-form>
    </c-dialog>

    <c-dialog :showFooter="false"
              :title="operDia.title"
              :visible="operDia.visible"
              @cancel="operDiaCancel">
      <oper-history ref="ref_oper_history"></oper-history>
    </c-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import CDialog from '../../components/CDialog'
import SubmitForm from './SubmitForm'
import CommitForm from './CommitForm'
import OperHistory from './OperHistory'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demo/demo/page',
        getDataListIsPage: true,
        deleteURL: '/demo/demo',
        deleteIsBatch: true,
        exportURL: '/demo/demo/export'
      },
      loading: false,
      dataForm: {
        client: '', // 客户
        type: '', // 类型
        state: '', // 代码状态
        commitDate: '', // 发布日期
        submitDate: '' // 审核日期

      },
      // 上传弹出框相关
      commitDia: {
        title: '',
        visible: false
      },
      // 审核弹出框相关
      submitDia: {
        title: '',
        visible: false
      },
      // 操作历史弹出框相关
      operDia: {
        title: '',
        visible: false
      },
      // 查询栏下拉框数据
      optionData:
      {
        client: [
          {
            value: '01',
            label: '市北区政府'
          },
          {
            value: '02',
            label: '市南区政府'
          }
        ],
        type: [
          {
            value: '01',
            label: '居民端'
          },
          {
            value: '02',
            label: '工作端'
          }
        ],
        state: [
          {
            value: '01',
            label: '提交未审核'
          },
          {
            value: '02',
            label: '审核中'
          },
          {
            value: '03',
            label: '审核成功'
          },
          {
            value: '04',
            label: '审核失败'
          },
          {
            value: '05',
            label: '已发布'
          }
        ]
      },

      // 列表数据
      tableData: [
        {
          client: '市北区政府',
          type: '居民端',
          appId: '100',
          version: '1.0.0',
          desc: '市北区政府居民端小程序',
          state: '01',
          stateShow: '提交未审核',
          commitDate: '2020-07-06',
          submitDate: ''
        },
        {
          client: '市北区政府',
          type: '工作端',
          appId: '200',
          version: '1.0.0',
          desc: '市北区政府工作端小程序',
          state: '02',
          stateShow: '审核中',
          commitDate: '2020-07-06',
          submitDate: '2020-07-07'
        },
        {
          client: '市南区政府',
          type: '居民端',
          appId: '300',
          version: '1.0.0',
          desc: '市南区政府居民端小程序',
          state: '03',
          stateShow: '审核成功',
          commitDate: '2020-07-06',
          submitDate: '2020-07-07'
        },
        {
          client: '市南区政府',
          type: '工作端',
          appId: '400',
          version: '1.0.0',
          desc: '市南区政府工作端小程序',
          state: '04',
          stateShow: '审核失败',
          commitDate: '2020-07-06',
          submitDate: '2020-07-07'
        },
        {
          client: '李沧区政府',
          type: '工作端',
          appId: '500',
          version: '1.0.0',
          desc: '李沧区政府居民端小程序',
          state: '05',
          stateShow: '已发布',
          commitDate: '2020-07-06',
          submitDate: '2020-07-07'
        }
      ]

    }
  },
  components: {
    CDialog, SubmitForm, CommitForm, OperHistory
  },
  mounted () {

  },
  methods: {
    // 上传代码
    commitCode (id) {
      this.commitDia.title = '上传代码'
      this.commitDia.visible = true
    },
    // 提交审核
    submitCode (id) {
      this.submitDia.title = '提交审核'
      this.submitDia.visible = true
    },
    submitDiaCancel () {
      this.submitDia.title = ''
      this.submitDia.visible = false
    },
    // 审核撤回
    submitRecall (id) {

    },
    // 体验版二维码
    showQRCode (id) {

    },
    // 发布
    issueCode (id) {

    },
    // 审核失败原因
    submitFailReason (id) {

    },
    // 操作历史
    operHistory (id) {
      this.operDia.title = '操作历史'
      this.operDia.visible = true
    },
    commitDiaCancel () {
      this.commitDia.title = ''
      this.commitDia.visible = false
    },
    operDiaCancel () {
      this.operDia.title = ''
      this.operDia.visible = false
    }

  }
}
</script>
