<!--
    firm 厂商
-->
<template>
  <el-dialog title="选择型号" :visible.sync="dialog.firm" width="900px">
    <div>
      <div id="firm">
        <div class="title-search query-form" style="padding: 10px;margin-bottom: 10px;">
          <el-input
            placeholder="输入厂家名称、品牌名、型号进行查找"
            v-model="search"
            size="small"
            style="width:300px; margin-right: 10px;"
            clearable
          ></el-input>
          <el-button @click="searchKey" size="small">查找</el-button>
        </div>
        <el-radio-group v-model="radio" style="width:100%;">
          <el-table class='data-table' :data="tableData" style="width: 100%" height="300px" border>
            <el-table-column label="生产厂家" header-align='center'>
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row">{{scope.row.venderName || "--"}}</el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="brand" label="品牌" header-align='center'></el-table-column>
            <el-table-column prop="name" label="型号" header-align='center'></el-table-column>
            <el-table-column label="技术参数" header-align='center'>
              <template slot-scope="scope">
                <el-button type="text" @click="lookParam(scope.row)">技术参数</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-radio-group>
        <div class="right" style="background: #fff;">
            <p style="height:40px;line-height:40px;text-align:center;color:#9E9E9E; float: left;">
                找不到想要的型号？ 赶快去
                <i style="color:#46B0FF;cursor: pointer;">厂家库</i>维护吧
            </p>
            <my-pagination :page="page" @change="changed" style="margin-top:10px;"></my-pagination>
        </div> 
        
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="getChange"
          >确 定</el-button>
        </div>
    <param-details :isLoad="isLoad" :data="data"></param-details>
  </el-dialog>
</template>
<script>
import myPagination from "@/components/ledger/lib/myPagination";
import paramDetails from "@/components/dialogs/list/paramDetails"
import { getSpecList } from "@/api/scan/request"

export default {
  components: {
    myPagination,
    paramDetails
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          firm: false
        };
      }
    },
    mess: {
      type: [Object, String]
    }
  },
  data() {
    return {
      search: "", //搜索文案
      radio: "",
      tableData: [
      ],
      data: {},
      isLoad: {
        paramShow: false
      },
      page: {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      },
    };
  },
  created() { },
  mounted() { },
  methods: {
    changed() {
      this.getData()
    },
    //查询技术参数
    lookParam(data) {
      this.data = data
      this.isLoad.paramShow = true
    },
    getChange() {
      if (!!this.radio) {
        this.$emit("changeFirm", this.radio)
        this.dialog.firm = false
      } else {
        this.$message("请选择型号")
      }
    },
    searchKey() {
      this.changePage()
    },
    changePage() {
      this.page = {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      }
      this.getData()
    },
    getData() {
      getSpecList({
        limit: {
          skip: this.page.size * (this.page.currentPage - 1),
          count: this.page.size
        },
        eqFamily: this.mess.deviceId,
        name: this.search
      }, res => {
        this.page.total = res.totalCount
        this.tableData = res.content
        console.log(this.tableData)
      })
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.firm) {
          console.log(this.mess)
          this.changePage()
        }
      }
    }
  }
};
</script>

<style lang="less">
#firm {
    height: 455px;
    overflow-y: auto;
  .el-table thead {
    tr {
      th {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>
