<template>
  <div>
    <div>
      <el-dialog
        title="库区"
        :visible.sync="areaFormVisible"
        :before-close="areaFormClose">
          <div class="mrr-b">
            <el-form
              inline
              ref="areaForm"
              label-position="top">
              <el-form-item>
                <el-select v-model="queryType"  @change="selectChange">
                  <el-option label="全部" value="all"></el-option>
                  <el-option label="库区编码" value="zoneCode"></el-option>
                  <el-option label="库区名称" value="zoneName"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="inputValue"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button v-auth="50300010105" type="primary" @click="handleSearch">查询</el-button>
                <el-button v-auth="50300010105" type="primary" @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="mrg-b">
            <el-table
              stripe
              border
              :data="tableData">
              <table-column
              width="45"
              align="center">
               <template slot-scope="scope">
                  <el-radio  v-model="radio" :label="scope.$index" @change.native="getCurrentRow(scope.$index,scope.row)">{{ }}</el-radio>
                </template>
              </table-column>
              <table-column
              label="区域编码"
              prop="zoneCode">
              </table-column>
              <table-column
              label="区域名称"
              prop="zoneName">
              </table-column>
            </el-table>
        </div>
        <div class="mrg-b">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <div>
          <el-button v-auth="50300010105" type="primary" @click="handleConfirm">确认</el-button>
          <el-button v-auth="50300010105" type="primary" @click="areaFormClose">关闭</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
<script>
export default {
  data () {
    return {
      formData: {
        queryType: 'bdWmsArea'
      },
      inputValue: '',
      queryType: '',
      pageSize: 5,
      currentPage: 1,
      selectedIds: '',
      radio: '',
    }
  },
  props: {
    areaFormVisible: Boolean,
    tableData: {
      type: Array,
      default: () => []
    },
    total: Number
  },
  computed: {

  },
  mounted () {
    this.showRow()
  },
  methods: {

    // 赋值给radio
    showRow (row) {
      this.radio = this.tableData.indexOf(row)
    },

    // 点击选中的radio获取值
    getCurrentRow (index, item) {
      // console.log(index,item)
      this.selectedIds = item.zoneName
      console.log('选中的是：', this.selectedIds)
    },

    // 每页显示条数
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.$emit('areaGetList', { 'page.limitCount': pageSize })
    },

    // 当前页码
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.$emit('areaGetList', { 'page.currentPage': currentPage })
    },

    // 关闭弹窗
    areaFormClose () {
      this.$emit('areaFormClose')
    },

    // 下拉框变化
    selectChange (key) {
      this.key = key
      console.log(this.key)
    },

    // 查询
    handleSearch () {
      // this.key 是隐藏变量 相当于在这个组件中定义的全局变量
      this.formData[this.key] = this.inputValue
      switch (this.key) {
        case 'all':
          delete this.formData.all
          this.formData.zoneCode = this.inputValue
          this.formData.zoneName = this.inputValue
          break
        case 'areaCode':
          delete this.formData.zoneName
          this.formData.zoneCode = this.inputValue
          break
        case 'areaName':
          delete this.formData.zoneCode
          this.formData.zoneName = this.inputValue
          break
        default:
          break
      }
      this.$emit('areaGetList', this.formData)
      console.log(this.formData)
    },

    // 重置表单
    resetForm () {
      // this.$refs.areaForm.resetFields()
      this.inputValue = ''
    },

    //  确认
    handleConfirm () {
      this.$emit('handleRadioChange', this.selectedIds)
    },

    // 关闭
    handleColse () {
      this.areaFormClose()
    }
  },
  watch: {
    // formData:{
    //   handler(){
    //     console.log(this.formData)
    //   },
    //   deep:true
    // }
  }
}
</script>
<style lang="scss" scoped>
    .mrg-b{
        margin-bottom: 20px;
    }
    .mrg-l{
        margin-left:10px;
    }
</style>
