<template>
  <ele-modal
    v-if="visible"
    :visible.sync="visible"
    title="供应商列表"
    width="70%"
    :centered="true"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-form :model="params" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="编码/代号：" prop="codeOrSerialNo">
            <el-input
              clearable
              v-model="params.codeOrSerialNo"
              placeholder="请输入"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供应商名称：" prop="name">
            <el-input
              clearable
              placeholder="请输入"
              v-model.trim="params.name"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否启用：" prop="codeOrSerialNo">
            <el-select
              v-model="params.status"
              placeholder="请选择"
              class="w100"
              clearable
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-container class="assets-dialog">
      <el-aside width="200px" style="max-height: calc(100vh - 355px)" class="wrapper-assets">
        <AssetTree
          @handleNodeClick="handleNodeClick"
          id="19"
          :isFirstRefreshTable="false"
          ref="treeList"
        />
      </el-aside>
      <el-main>
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasource"
          height="calc(100vh - 405px)"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          :current.sync="current"
          :highlight-current-row="true"
          @current-change="handleCurrentChange"
          cache-key="eomContactPageTable"
        >
          <template v-slot:current="{row,_index}">
            <el-radio class="radio" v-model="radio" :label="row.id"><i></i></el-radio>
          </template>
        </ele-pro-table>
      </el-main>
    </el-container>

    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="visible = false">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getTreeByPid } from '@/api/classifyManage';
  import { getVendorPageList } from '@/api/factoryModel';
  import AssetTree from '@/components/AssetTree';
  export default {
    components: { AssetTree },
    data() {
      return {
        params: {},
        visible: false,
        selection: [],
        radio: '',
        statusList: [
          { value: 1, label: '启用' },
          { value: 2, label: '禁用' }
        ],
        delVisible: false,
        // 加载状态
        loading: false,
        columns: [
          {
            width: 55,
            columnKey: 'current',
            slot: 'current',
            align: 'center'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '供应商编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'name',
            label: '供应商名称',
            align: 'center',
            slot: 'name',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'serialNo',
            label: '供应商代号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'phone',
            label: '供应商电话',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'addressName',
            label: '单位地址',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (_row, _column, cellValue) => {
              let addr =
                '' + _row.addressName
                  ? _row.addressName.replaceAll(',', '')
                  : '';
              addr += _row.address ? _row.address : '';
              return addr;
            }
          },
          {
            prop: 'linkName',
            label: '联系人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'linkPhone',
            label: '联系人电话',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return _row.status === 1 ? '启用' : '禁用';
            }
          },
          {
            prop: 'createUsername',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          }
        ],
        current: {},
        curNodeData: {},
        treeList: [],
        treeLoading: false,
        formData: {},
        rootTreeId: null,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        showEdit: true
      };
    },
    created() {},
    methods: {
      /*  重置 */
      reset() {
        this.params = {};
        this.search();
      },
      search() {
        this.reload({ ...this.params });
      },
      handleNodeClick(data, node) {
        this.curNodeData = data;
        this.reload({ categoryId: data.id });
      },
      handleCurrentChange(row){
        this.radio = row.id
      },
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },
      datasource({ page, limit, where, order }) {
        return getVendorPageList({
          pageNum: page,
          size: limit,
          type: 2,
          ...where
        });
      },
      open() {
        this.visible = true;
        this.$nextTick(() => {
          this.$refs.treeList.getTreeData();
        });
      },
      confirm() {
        this.$emit('success', this.current);
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-dialog__wrapper {
    ::v-deep .el-aside {
      background-color: #fff !important;
      border: 1px solid #ccc;
      transform: translateY(20px);
    }
  }

  .wrapper-assets {
    max-height: 53vh;
    overflow: auto;
  }
</style>
