<template>
  <div class="app-container">
    <!--div class="filter-container">
      <el-button v-show="visibleAddaudit" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleCreate">
        新增
      </el-button>
    </div-->
    <el-table
      :data="auditList"
      border
      fit
      highlight-current-row
      style="width: 800px;"
    >
      <el-table-column
        prop="version"
        label="版本"
      />
      <el-table-column
        label="型号"

        align="center"
      >
        <template slot-scope="scope">
          <svg-icon v-if="scope.row.model === 1" style="font-size: 20px;color: #4A9FF9" icon-class="Android" />
          <svg-icon v-if="scope.row.model === 2" style="font-size: 20px;color: #333333" icon-class="IOS" />
        </template>
      </el-table-column>

      <el-table-column
        label="是否审核中"

        align="center"
      >
        <template slot-scope="scope">
          <svg-icon v-if="scope.row.is_auditing === 1" icon-class="ok" style="font-size: 20px;" />
          <svg-icon v-else icon-class="no" style="font-size: 20px;" />
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button v-show="visibleEditaudit" type="text" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;">
        <el-form-item label="Version" prop="version">
          <el-input v-model="form.version" />
        </el-form-item>
        <el-form-item label="型号" prop="model">
          <el-radio-group v-model="form.model">
            <el-radio :label="1" disabled>Android</el-radio>
            <el-radio :label="2" disabled>IOS</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否审核中">
          <el-switch
            v-model="form.is_auditing"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          Cancel
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          Confirm
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
// import Pagination from '@/components/Pagination/index.vue'
import { addAudit, updateAudit, getAuditList } from '@/api/audit'
import { checkuipermission } from '@/store/modules/permission'

export default {
  components: {

  },

  data() {
    return {
      form: {
        version: '',
        model: '',
        is_auditing: 1
      },
      dialogFormVisible: false,
      dialogStatus: '',
      dialogTitle: '新增',
      listLoading: true,
      auditList: [],
      rules: {
        version: [{ required: true, message: 'version is required', trigger: 'blur' }],
        model: [{ required: true, message: '请选择型号', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
    if (checkuipermission('addaudit')) {
      this.visibleAddaudit = true
    } else {
      this.visibleAddaudit = false
    }

    if (checkuipermission('editaudit')) {
      this.visibleEditaudit = true
    } else {
      this.visibleEditaudit = false
    }
  },
  methods: {
    handleUpdate(row) {
      console.log(row)
      this.form.version = row.version
      this.form.model = row.model
      this.form.is_auditing = row.is_auditing
      this.form.idx = row.idx
      this.dialogStatus = 'update'
      this.dialogTitle = '编辑'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    getList() {
      getAuditList().then(response => {
        if (response.code === 0) {
          this.auditList = response.data
        }
      })
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogTitle = '新增'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    resetTemp() {
      this.form = {
        version: '',
        model: '',
        is_auditing: 1
      }
    },
    createData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addAudit(this.form).then(response => {
            if (response.code === 0) {
              this.dialogFormVisible = false
              this.getList()
              this.$notify({
                title: 'Success',
                message: 'Created Successfully',
                type: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    },
    updateData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          updateAudit(this.form).then(response => {
            if (response.code === 0) {
              this.dialogFormVisible = false
              this.getList()
              this.$notify({
                title: 'Success',
                message: 'Updated Successfully',
                type: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    }
  }
}
</script>
