<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="900px"
    append-to-body
    class="owner-selector-dialog"
    :close-on-click-modal="false"
  >
    <span slot="title">
      选择货主
      <small class="title-tip">双击表格行可快速选择</small>
    </span>
    <div class="owner-selector-body">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="90px"
        class="owner-selector-form"
      >
        <el-form-item label="货主编码" prop="ownerCode">
          <el-input
            v-model="queryParams.ownerCode"
            placeholder="请输入货主编码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="货主名称" prop="ownerName">
          <el-input
            v-model="queryParams.ownerName"
            placeholder="请输入货主名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="是否激活" prop="isActive">
          <el-select
            v-model="queryParams.isActive"
            placeholder="请选择"
            clearable
            style="width: 180px"
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="ownersList"
        :max-height="380"
        highlight-current-row
        @current-change="handleCurrentChange"
        @row-dblclick="handleRowDblClick"
        style="flex: 1; min-height: 0;"
      >
        <el-table-column type="index" label="#" width="60" align="center" />
        <el-table-column label="货主编码" prop="ownerCode" width="150" />
        <el-table-column label="货主名称" prop="ownerName" min-width="220" show-overflow-tooltip />
        <el-table-column label="联系人" prop="contactPerson" width="150" />
        <el-table-column label="联系电话" prop="contactPhone" width="150" />
        <el-table-column label="是否激活" prop="isActive" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isActive === '1' || scope.row.isActive === 1 ? 'success' : 'info'" size="mini">
              {{ scope.row.isActive === '1' || scope.row.isActive === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirmSelection">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listOwners } from "@/api/inventory/owners"

export default {
  name: "OwnerSelector",
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ownersList: [],
      loading: false,
      total: 0,
      currentOwner: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ownerCode: null,
        ownerName: null,
        isActive: "1"
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val)
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.init()
        })
      } else {
        this.resetState()
      }
    }
  },
  methods: {
    init() {
      if (this.ownersList.length === 0) {
        this.getList()
      }
    },
    resetState() {
      this.currentOwner = null
    },
    getList() {
      this.loading = true
      listOwners(this.queryParams)
        .then(res => {
          this.ownersList = res.rows || []
          this.total = res.total || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        ownerCode: null,
        ownerName: null,
        isActive: "1"
      }
      this.getList()
    },
    handleCurrentChange(row) {
      this.currentOwner = row
    },
    handleRowDblClick(row) {
      this.currentOwner = row
      this.confirmSelection()
    },
    confirmSelection() {
      if (!this.currentOwner) {
        this.$message.warning("请先选择一个货主")
        return
      }
      const payload = {
        ownerCode: this.currentOwner.ownerCode,
        ownerName: this.currentOwner.ownerName,
        ownerId: this.currentOwner.id
      }
      this.$emit("selected", payload)
      this.dialogVisible = false
    },
    close() {
      this.dialogVisible = false
    },
    refresh() {
      this.getList()
    }
  }
}
</script>

<style scoped>
.owner-selector-dialog /deep/ .el-dialog__body {
  padding: 10px 20px 0;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}

.owner-selector-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.owner-selector-form {
  margin-bottom: 10px;
}

.title-tip {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
}
</style>

