<template>
  <div id="addOrderInfo">
    <div>
      <el-card style="position: relative;">
      <p>新增订单</p>

      <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto" :show-message="false">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="订单查询">
              <el-input
                style="width:200px"
                clearable
                :disabled="sonDisable"
                size="mini"
                v-model.trim="basicForm.orderCode"
              >
              </el-input>
              <el-button style="margin-left: 10px" size="mini" @click="checkOrder">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

        <el-super-ux-table
            id="data-table"
            v-model="tableData"
            index
            checkbox
            :size="size"
            :dict="dict"
            :page="pageInfo"
            :height=500
            :columns="TableColumns"
            pagination
            convenitentOperation
            storage-key="orderTable"
            @row-dblclick="useSee"
            @row-select="useSelect"
            @selection-change="handleSelectionChange"
            @row-click="rowSelect"
            @pagination="useQuery(params, pageInfo)"
            ref="tables"
          >
          <ux-table-column
            fixed="right"
            title="内部价格"
            align="center"
            width="160"
            >
            <template slot-scope="scope">
              <!-- <el-button type="text" size="mini" v-if="scope.row.status == '1' && scope.row.flowId" @click="reback(scope.row)">收回</el-button> -->
              <!-- <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button> -->
              <!-- <el-button type="text" size="mini" @click="delItem(scope.row)">删除</el-button> -->
              <el-input-number size="mini" controls-position="right" :min="0" v-model="scope.row.sipPrice"></el-input-number>
            </template>
          </ux-table-column>

          <ux-table-column
            fixed="right"
            title="内部供应商"
            align="center"
            width="260"
            >
            <template slot-scope="scope">
              <el-input style="width:200px" clearable :disabled="sonDisable" size="mini" v-model="scope.row.sipSupplierName" @clear="clearHang(scope.rowIndex)">
                <el-button size="mini" :disabled="sonDisable" slot="append" icon="el-icon-more" @click="chooseDept(scope.rowIndex,'SIP_SUPPLIER_PARAM',true,'选择内部供应商')"></el-button>
              </el-input>
            </template>
          </ux-table-column>
        </el-super-ux-table>

      <div class="btn_group">
        <el-button type="primary" size="mini"  @click="editPage" v-if="sonPageStu == 'check'">编辑</el-button>
        <el-button type="primary" size="mini"  @click="save" v-if="sonPageStu == 'add' || sonPageStu == 'edit'">保存</el-button>
        <el-button size="mini" plain @click="back">返回</el-button>
      </div>

      </el-card>
    </div>

    <Refers ref="refer" @doSubmit="selectionsToInput" :single="true" />
  </div>
</template>

<script>
import { searchList, editOrder } from '@/api/innerData/order.js'
export default {
  dicts: [],
  components: {
    Refers: () => import("@/components/Refers/refers.vue"),
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
  },
  props: ['pageStu','row', 'disable'],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data () {
    return {
      // 不能直接改变props传来的值
      sonPageStu: this.pageStu,
      sonDisable: this.disable,
      basicForm: {
        orderCode: ''
      },
      basicRules: {},
      size: "mini",
      pageInfo: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      selectData: [],
      // SearchColumns: SearchColumns,
      TableColumns: [
        { item: { key: "puOrgName", title: "采购组织" }, attr: {} },
        { item: { key: "billTypeName", title: "订单类型" }, attr: {} },
        { item: { key: "supplierName", title: "供应商" }, attr: {} },
        { item: { key: "orderCode", title: "订单编号" }, attr: {} },
        { item: { key: "taxPrice", title: "价税合计" }, attr: {} },
        { item: { key: "buyerName", title: "采购员" }, attr: {} },
        { item: { key: "materialName", title: "物料名称" }, attr: {} },
        { item: { key: "materialCode", title: "物料编码" }, attr: {} },
        { item: { key: "specification", title: "规格" }, attr: {} },
        { item: { key: "model", title: "型号" }, attr: {} },
        { item: { key: "manufacturerName", title: "生产厂家/代理人" }, attr: {} },
        { item: { key: "unitName", title: "单位" }, attr: {} },
        { item: { key: "qty", title: "数量" }, attr: {} },
        { item: { key: "money", title: "含税单价" }, attr: {} },
      ].map(({ item, attr }) => ({
      attr,
      item: {
        ...item,
        sortabled: true,
        fixedabled: true,
        filterabled: true,
        hiddenabled: true,
      },
      })),
      ids: [],
      referCondition: {
        type: "",
        isPage: true,
        title: "",
      },
      tableIndex: null,
    }
  },
  methods: {
    editPage() {
      this.sonPageStu = 'edit'
      this.sonDisable = false
    },
    async save() {
      if (this.tableData.length !== 0 ) {
        editOrder(this.tableData).then(res => {
          if( res.code === 200 ) {
            this.$modal.notifySuccess("新增保存成功");
            this.back()
          }
        })
      } else {
        this.$modal.notifyWarning("新增数据不能为空");
      }
      // console.log(this.tableData)
    },
    back() {
      this.$emit('jugislist', true)
      this.$emit('refresh')
    },
    checkOrder() {
      if (this.basicForm.orderCode) {
      let params = {orderCode: this.basicForm.orderCode}
        searchList(params).then(res => {
          if( res.code === 200 ) {
            this.tableData = res.rows
            this.pageInfo.total = res.total
          }
        })
      } else {
        this.$modal.notifyWarning("请输入订单编号查询");
      }
    },
    useSee() {},
    useSelect() {},
    handleSelectionChange(selection) {
      console.log('选中', selection)
      this.ids = selection.map(item => item.id)
      console.log('选中数组', this.ids)
    },
    rowSelect(row) {
      this.$refs.tables.toggleRowSelection([{row: row}]);
    },
    // 加载列表
    async useQuery(prop, page) {
      // let params = {...prop, ...page}
      // await orderList(params).then(res => {
      //   if( res.code === 200 ) {
      //     this.tableData = res.rows
      //     this.pageInfo.total = res.total
      //   }
      // })
    },
    clearHang(index) {
      this.tableData[index].sipSupplierName = ''
      this.tableData[index].sipSupplier = ''
      this.tableData[index].sipSupplierCode = ''
    },
    selectionsToInput(selection) {
      if ( this.referCondition.type == "SIP_SUPPLIER_PARAM") {
        this.tableData[this.tableIndex].sipSupplierName = selection[0].name;
        this.tableData[this.tableIndex].sipSupplier = selection[0].id;
        this.tableData[this.tableIndex].sipSupplierCode = selection[0].code;
      }
    },
    chooseDept(index, type, isPage, title) {
      this.tableIndex = index;
      this.referCondition.type = type;
      this.referCondition.isPage = isPage;
      this.referCondition.title = title;
      this.$refs.refer.init(this.referCondition);
    },
  }
}
</script>

<style lang="scss" scoped>
.btn_group {
  // width: 100%;
  // margin: 20px 0;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 10px;right: 20px;

}  
</style>