<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    append-to-body
  > 
    <!-- 页脚 -->
    <template slot="footer">
      <el-button 
        type="primary" 
        @click="handleSubmit"
      >
        确定
      </el-button>
      <el-button 
        @click="handleCancel"
      >
        关闭
      </el-button>
    </template>

    <div>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @selection-change="selectionChange"
      >
        <!-- :permission="permissionList" -->

        <!-- @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel" -->

        <!-- @on-load="getList" -->
        <template slot="orderStatus" slot-scope="scope" >
          <span v-if="scope.row.orderStatus == '0'" style="color:#00a8f3">待发货</span>
          <span v-else-if="scope.row.orderStatus == '1'" style="color:#0ed145">已发货</span>
          <span v-else-if="scope.row.orderStatus == '2'" style="color:#e04046">取消</span>
        </template>

      </avue-crud>
    </div>
  </el-dialog>
</template>

<script>
import { fetchList, addResult, getResult, delResult, putResult } from '@/api/commonApis'

export default {
  name: '',
  components: {

  },
  data() {
    return {
      title: '订单',
      width: '80%',
      visible: false,

      url: {
        // 共用方法和命名
        getList: '/invtory/invgoodsorder/page',
      },
      selectionRows: [],
      searchForm: {},
      tableData: [],
      tableLoading: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },

      tableOption: {
        menuPosition: "center",
        border: true,
        index: true,
        indexLabel: "序号",
        stripe: true,
        menuAlign: "center",
        align: "center",
        searchMenuSpan: 6,
        searchSpan: 6,
        searchBtn: false,
        searchShowBtn: true,
        searchIcon: true,
        searchLabelWidth: 80,
        labelWidth: 120,
        menuWidth: 150,
        searchIndex: 3,
        submitBtn: true,
        submitText: "确定",
        menuBtn: false,
        menu: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: true,
        reserveSelection: true,
        column: [
          {
            type: "input",
            overHidden: true,
            label: "ID",
            prop: "orderId",
            span: 12,
            hide: true,
            display: false,
          },
          {
            type: "input",
            overHidden: true,
            label: "订单号",
            prop: "orderNo",
            span: 12,
            addDisplay: false,
            width: 150,
          },
          {
            label: "商品类型",
            prop: "goodsName",
            span: 12,
            type: "select",
            overHidden: true,
            multiple: true,
            dicUrl: "/invtory/invgoodstype/getAllGoodsType",
            props: {
              label: "goodsTypeName",
              value: "goodsTypeNo",
            },
          },
          {
            type: "number",
            overHidden: true,
            label: "订单数量",
            prop: "orderQyt",
            span: 12,
            width: 80,
          },
          {
            type: "number",
            overHidden: true,
            precision: 2,
            label: "订单金额",
            prop: "totalPrice",
            span: 12,
            width: 120,
          },
          {
            type: "input",
            overHidden: true,
            label: "客户",
            prop: "custName",
            span: 12,
          },
          {
            type: "date",
            overHidden: true,
            label: "订单日期",
            prop: "orderDate",
            span: 12,
            width: 120,
          },
          {
            type: "select",
            overHidden: true,
            label: "订单状态",
            prop: "orderStatus",
            span: 12,
            // 0-待发货,1-已发货,2-取消
            dicData: [
              { value: '0', label: '待发货' },
              { value: '1', label: '已发货' },
              { value: '2', label: '取消' },
            ],
            width: 80,
            slot: true,
          },
          {
            type: "input",
            overHidden: true,
            label: "快递单号",
            prop: "courierNumber",
            span: 12,
          },
          {
            type: "date",
            overHidden: true,
            label: "发货日期",
            prop: "sendGoodsDate",
            span: 12,
          },
          {
            type: "textarea",
            overHidden: true,
            label: "备注",
            prop: "remark",
            span: 24,
          },
          {
            type: "date",
            overHidden: true,
            label: "创建时间",
            prop: "crteTime",
            span: 12,
            disabled: true,
            addDisplay: false,
          },
          {
            type: "input",
            overHidden: true,
            label: "创建者",
            prop: "crteUser",
            span: 12,
            disabled: true,
            addDisplay: false,
          },
          {
            type: "date",
            overHidden: true,
            label: "最后更新时间",
            prop: "upteTime",
            span: 12,
            hide: true,
            disabled: true,
            addDisplay: false,
          },
          {
            type: "input",
            overHidden: true,
            label: "最后更新用户",
            prop: "upteUser",
            span: 12,
            hide: true,
            disabled: true,
            addDisplay: false,
          },
        ],
      }

    }
  },
  watch: {

  },
  created() {

  },
  methods: {
    getList(current, params) {
      this.tableLoading = true
      if (current) {
        this.page.currentPage = current
      }
      if (params) {
        this.searchForm = Object.assign(this.searchForm, params)
      }
      fetchList(this.url.getList, Object.assign({
        current: this.page.currentPage,
        size: this.page.pageSize,
      }, this.searchForm)).then(res => {
        this.tableData = res.data.data.records
        this.page.total = res.data.data.total
        this.tableLoading = false
      }).catch(err => {
        this.$message.error('获取表格数据错误！原因：' + err)
        this.tableLoading = false
        this.tableData = []
        this.page.total = 0
      });
    },
    // 表格选中事件
    selectionChange(selectionRows) {
      if (selectionRows.length) {
        if (selectionRows.length > 1) {
          const nowVal = selectionRows.shift();
          this.$refs.crud.toggleRowSelection(nowVal, false);
        } else if (selectionRows.length === 1) {
          this.selectionRows = selectionRows
        } else {
          this.$message.warning("只能选择一条数据!");
        }
      }
    },


    handleSubmit(e) {
      if(this.selectionRows && this.selectionRows.length) {
        this.$emit('selectionRowsEmit', this.selectionRows)
        this.close()
      } else {
        this.$message.warning("请选择一条数据!");
      }
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.resetModalData()
      this.visible = false
    },
    // 当前页面部分数据置空
    resetModalData() {
      this.$refs.crud.toggleSelection()
    },


    // 刷新按钮
    refreshChange() {
      this.getList();
    },
    // 搜索按钮
    searchChange(form, done) {
      this.searchForm = JSON.parse(JSON.stringify(form))
      this.getList(1)
      done()
    },
    // 分页相关
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },











  }

}
</script>

