
<!--审核项-->
<template>
  <div>

    <el-form :inline="true"
             :model="dataForm">
      <el-form-item label="页面列表"
                    prop="versionDesc"
                    label-width="150px">
        <el-select v-model="dataForm.address"
                   placeholder="页面列表"
                   style="width:600px"
                   filterable>
          <el-option v-for="item in addressList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <div class="el-upload__tip">小程序版本说明和功能解释</div>
      </el-form-item>
      <el-form-item label="标签"
                    prop="tag"
                    label-width="150px">
        <el-input placeholder='请输入标签'
                  style="width:300px"
                  maxlength="20"
                  show-word-limit
                  v-model="dataForm.tag">
        </el-input>
        <div class="el-upload__tip">小程序的标签，用空格分隔，标签至多10个，标签长度至多20</div>
      </el-form-item>

      <el-form-item label="标题"
                    prop="title"
                    label-width="150px">
        <el-input placeholder='请输入标题'
                  style="width:600px"
                  maxlength="32"
                  show-word-limit
                  v-model="dataForm.title">
        </el-input>
        <div class="el-upload__tip">小程序页面的标题，标题长度至多32</div>
      </el-form-item>

    </el-form>
    <el-table id="out-table"
              ref="table_category"
              :header-cell-style="{color:'#000'}"
              :data="categoryList"
              :style="{width: '100%'}"
              border>
      <el-table-column label=""
                       width="35"
                       center>
        <template slot-scope="scope">
          <el-radio :label="scope.row.id"
                    v-model="templateRadio"
                    @change.native="getRadioRow(scope.$index,scope.row)">&nbsp;</el-radio>
        </template>
      </el-table-column>

      <el-table-column prop="firstClass"
                       label="一级名称"
                       min-width="100"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="firstId"
                       label="一级ID"
                       min-width="100"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="secondClass"
                       label="二级名称"
                       min-width="70"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="secondId"
                       label="二级ID"
                       min-width="100"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="thirdClass"
                       label="三级名称"
                       min-width="70"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="thirdId"
                       label="三级ID"
                       header-align="center"
                       min-width="100"
                       align="center"></el-table-column>
    </el-table>
    <div style="margin-top:10px">
      <el-button type="primary"
                 style="margin-bottom:10px"
                 @click="addItem()">增加</el-button>
    </div>
    <el-table id="out-table"
              ref="table"
              :header-cell-style="{color:'#000'}"
              :data="itemTableData"
              :style="{width: '100%'}"
              border>

      <el-table-column prop="address"
                       label="页面"
                       min-width="100"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="tag"
                       label="标签"
                       min-width="100"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="title"
                       label="标题"
                       min-width="100"
                       header-align="center"
                       align="center"></el-table-column>

      <el-table-column prop="firstClass"
                       label="一级名称"
                       min-width="100"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="firstId"
                       label="一级ID"
                       min-width="100"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="secondClass"
                       label="二级名称"
                       min-width="70"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="secondId"
                       label="二级ID"
                       min-width="100"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="thirdClass"
                       label="三级名称"
                       min-width="70"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="thirdId"
                       label="三级ID"
                       header-align="center"
                       min-width="100"
                       align="center"></el-table-column>
      <!--操作列-->
      <el-table-column label="操作"
                       fixed="right"
                       :min-width="80"
                       header-align="center"
                       class="operate">
        <template slot-scope="scope">

          <el-button size="mini"
                     type="text"
                     @click.stop="deleteItem(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import CTable from '@c/CTableNoPage'
import CForm from '@c/CForm'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      codeId: '',
      addressUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/getpage',
      categoryUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/getcategory',
      addressList: [], // 页面列表
      categoryList: [], // 类目列表
      templateRadio: '',
      selCategory: {},
      dataForm: {
        address: '',
        tag: '',
        title: ''
      },
      // 类目查询相关
      tableParams: {},
      operations: [],

      // 最终的审核列表数据
      itemTableData: []
    }
  },
  components: {
    CTable, CForm
  },
  mounted () {
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 50 - 400
    },
    ...mapGetters(['clientHeight'])
  },
  props: {
    optionData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    initData (codeId) {
      this.reseatData()
      this.codeId = codeId
      const params = {
        codeId: this.codeId
      }
      window.app.ajax.post(this.addressUrl, params,
        (data, rspMsg) => {
          data.forEach(item => {
            let obj = {}
            obj.label = item
            obj.value = item
            this.addressList.push(obj)
          })
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        })

      window.app.ajax.post(this.categoryUrl, params,
        (data, rspMsg) => {
          // data = [
          //   {
          //     'first_class': '社交',
          //     'second_class': '社区/论坛',
          //     'first_id': 684,
          //     'second_id': 794
          //   },
          //   {
          //     'first_class': '社交1',
          //     'second_class': '社区/论坛1',
          //     'first_id': 685,
          //     'second_id': 796
          //   }
          // ]
          data.forEach((item, index) => {
            item.id = index
          })
          this.categoryList = data
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        })
    },
    getRadioRow (index, row) {
      this.selCategory = row
    },
    // 增加一条审核项
    addItem () {
      if (this.itemTableData.length === 5) {
        this.$message.warning('最多填写5项审核项')
        return false
      }
      // eslint-disable-next-line
      // debugger

      // 判断是否重复添加页面
      const that = this
      let result = this.itemTableData.some(function (value) {
        return value.address === that.dataForm.address
      })

      if (result) {
        this.$message.warning('当前页面已添加，请更换页面后重新添加')
        return false
      }
      let oneObj = {}
      oneObj.address = this.dataForm.address
      oneObj.title = this.dataForm.title
      oneObj.tag = this.dataForm.tag
      oneObj.firstClass = this.selCategory.firstClass
      oneObj.firstId = this.selCategory.firstId
      oneObj.secondClass = this.selCategory.secondClass
      oneObj.secondId = this.selCategory.secondId
      oneObj.thirdClass = this.selCategory.thirdClass
      oneObj.thirdId = this.selCategory.thirdId

      this.itemTableData.push(oneObj)
    },
    deleteItem (index) {
      this.itemTableData.splice(index, 1)
    },
    getItemList () {
      return this.itemTableData
    },
    reseatData () {
      this.dataForm = {
        address: '',
        tag: '',
        title: ''
      }
      this.templateRadio = ''
      this.addressList = []
      this.categoryList = []
      this.itemTableData = []
      this.selCategory = {}
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  }
}
</script>
