<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    top="25px"
    :visible.sync="isVisible"
    class="goods-dialog"
    @opened="open"
  >
    <div class="product-page">
      <div class="toolbar">
        <el-form
          :inline="true"
          :model="formParams"
        >
          <el-form-item>
            <el-input
              v-model="formParams.storeName"
              size="mini"
              placeholder="店铺名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              @click="fetch"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="product-content">
        <el-table
          ref="multipleTable"
          :data="tableData.records"
          style="width: 100%"
        >
          <el-table-column width="55" align="center">
            <template slot-scope="scope">
              <el-radio
                v-model="radioId"
                :label="scope.row.id"
                size="medium"
                class="textRadio"
                @change.native="getCurrentRow(scope.row)"
              >&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="storeName"
            label="店铺名称"
          />
          <el-table-column
            prop="mobile"
            label="手机号"
          />
        </el-table>
      </div>
      <pagination
        v-show="tableData.total > 0"
        :limit.sync="formParams.size"
        :page.sync="formParams.current"
        :total="Number(tableData.total)"
        @pagination="fetch"
      />
    </div>
    <div slot="footer" class="add-btn-wrap">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Applet from '@/api/Applet'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  props: {
    exclude: {
      type: Array,
      default() {
        return []
      }
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      tableData: {},
      formParams: {
        "current": 1,
        "map": {},
        "model": {
          "id": 0,
          "isAutoSendRefundAddress": 0,
          "logo": "",
          "mobile": "",
          "refundAddress": "",
          "refundContact": "",
          "refundTel": "",
          "remark": "",
          "shipAddress": "",
          "storeName": ""
        },
        "order": "descending",
        "size": 10,
        "sort": "id"
      },
      radioId: null
    }
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.close()
        this.reset()
      }
    },
    title () {
      return '选择商品'
    }
  },
  methods: {
    getCurrentRow(row) {
      this.radioId = row.id
      this.selectOneShop = {
        id: row.id,
        storeName: row.storeName
      }
    },
    async getStorePage () {
      const res = await Applet.getStorePage(this.formParams)
      const resData = res.data
      const { code } = resData
      if (code === 0) {
        this.tableData = resData.data
      }
    },
    fetch (config) {
      const { limit, page } = config
      this.formParams.current = page || 1
      this.formParams.size = limit || 10
      this.getStorePage()
    },
    editClose () {
      this.dialog.isVisible = false
    },
    onSubmit () {
      this.$emit('success', [this.selectOneShop])
      this.close()
    },
    close () {
      this.$emit('close')
    },
    open() {
      this.getStorePage()
    },
    reset () {
      this.radioId = null
      this.formParams = {
        "current": 1,
        "map": {},
        "model": {
          "id": 0,
          "isAutoSendRefundAddress": 0,
          "logo": "",
          "mobile": "",
          "refundAddress": "",
          "refundContact": "",
          "refundTel": "",
          "remark": "",
          "shipAddress": "",
          "storeName": ""
        },
        "order": "descending",
        "size": 10,
        "sort": "id"
      }
    }
  }
}
</script>
<style lang="less">
.add-dialog-component {
  .form-inline{
    display: inline-block;
    margin: auto;
  }
  .tree-box {
    .el-tree-node__content {
      margin-bottom: 15px;
      height: auto;
    }
  }
}
</style>
<style lang="less" scoped>
.goods-dialog{
  /deep/ .el-dialog {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    min-width: 1000px;
    overflow: hidden;
    .el-dialog__body {
      flex: 1;
      overflow: auto;
    }
  }
  .dialog-from {
    width: 80%;
    margin: auto;
  }
  .btn-wrap {
    margin: 45px auto 0;
    text-align: right;
  }
  .form-item-row {
    padding-top: 40px;
    /deep/ .el-input {
      width: 100px;
      margin: 0 5px;
    }
  }
}
.product-page {
  padding: 15px 20px;
  .toolbar {
    margin-bottom: 25px;
    .product-name {
      width: 180px;
    }
  }
}
</style>
