<!--
    maintenance 选择供应商

-->
<template>
  <el-dialog title="选择维修商" :visible.sync="dialog.maintainer" width="1000px">
    <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 size="small" @click="filterSearch">查找</el-button>
        </div>
        <el-radio-group v-model="radio" style="width:100%;">
          <el-table class="data-table" border ref="maintenance" :data="tableData" style="width: 100%" height="300px">
            <el-table-column header-align='center' label="维修商名称">
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.name" placement="top">
                  <el-radio v-model="radio" :label="scope.row">{{scope.row.name}}</el-radio>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column header-align='center' prop="website" label="网址"></el-table-column>
            <el-table-column header-align='center' prop="man" label="联系人"></el-table-column>
            <el-table-column header-align='center' prop="phone" label="联系电话"></el-table-column>
            <el-table-column header-align='center' prop="faxes" label="传真"></el-table-column>
            <el-table-column header-align='center' prop="email" label="电子邮件"></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="changePage" style="margin-top:10px;"></my-pagination>
        </div>        
      </div>
    </div>
    <div slot="footer">
          <el-button
            type="primary"
            @click="getChange"
          >确 定</el-button>
        </div>
  </el-dialog>
</template>
<script>
import myPagination from "@/components/ledger/lib/myPagination";
import { mapGetters } from "vuex";
import { getLib } from "@/api/scan/request"
import tools from "@/utils/scan/tools"

export default {
  components: {
    myPagination
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          maintainer: true
        };
      }
    }
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"]),
  },
  data() {
    return {
      search: "", //搜索文案
      radio: "",
      tableData: [],
      page: {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      }
    };
  },
  created() {
    // this.getData()
  },
  mounted() { },
  methods: {
    //过滤
    filterSearch() {
      this.tableData = this.allData.map(item => {
        if (item.name.indexOf(this.search) != -1) {
          return item
        } else {
          return undefined
        }
      }).filter(cb => cb)
    },
    getData() {
      this.page = {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      }
      getLib({ "type": ["maintenance"] }).then(res => {
        if (res.data.result == "success") {
          let data = res.data.content.maintenance.map(item => {
            if (item.contacts && item.contacts.length) {
              item.contacts.map(child => {
                if (child.projectId == this.projectId) {
                  item.phone = child.phone
                  item.man = child.name
                  item.fox = child.fox
                  item.email = child.email
                }
                return child
              })
            }
            if (!item.man) {
              item.man = "--"
              item.phone = "--"
              item.fox = "--"
              item.email = "--"
            }
            return item
          })
          this.allData = tools.deepCopy(data)
          this.tableData = this.pagination(this.page.currentPage, this.page.size, this.allData)
          this.page.total = data.length
        } else {
          this.$message.error("请求失败：" + res.data.resultMsg)
        }
      })
    },

    //分页改变
    changePage() {
      this.pagination(this.page.currentPage, this.page.size, this.allData)
    },

    //发生修改
    getChange() {
      if (!!this.radio) {
        console.log(this.radio, "radio")
        this.$emit("changeMaintainer", this.radio)
        this.dialog.maintainer = false
      } else {
        this.$message("请选择一个生产厂商")
      }
    },

    //分页事件
    pagination(pageNo, pageSize, array) {
      let offset = (pageNo - 1) * pageSize;
      return offset + pageSize >= array.length
        ? array.slice(offset, array.length)
        : array.slice(offset, offset + pageSize);
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.maintainer) {
          this.getData()
        }
      }
    }
  }
};
</script>

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