<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="3">
            <a-form-item label="">
              <a-input
                placeholder="姓名"
                v-model="queryParam.userName"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="">
              <a-range-picker
                format="YYYY-MM-DD"
                :placeholder="['租借开始日期', '租借结束日期']"
                @change="onChange"
                v-model="datetime"
                :allowClear="false"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button
                type="primary"
                @click="searchQuery"
                icon="search"
              >查询</a-button
              >
              <!-- <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
                >重置</a-button
              > -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>
    <!-- table区域-begin -->
    <div class="table-remake">
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: 800, y: 350 }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <!-- <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text, record">
          <span v-if="!text" style="font-size: 12px; font-style: italic"
            >无图片</span
          >
          <img
            v-else
            :src="getImgView(text)"
            :preview="record.id"
            height="25px"
            alt=""
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic"
            >无文件</span
          >
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)"
          >
            下载
          </a-button>
        </template> -->

        <template v-for="col in columns.map(item=> item.dataIndex )" :slot="col" slot-scope="text, record, index">
          <div :key="col">
            <a-input
              v-if="record.editable && col == 'userName' "
              style="margin: -5px 0;width:100px;"
              v-model="record.userName"
            />
            <!-- <template v-if="!record.editable && col != 'relay' ">
              {{ text }}
            </template>
            <template v-if="record.editable && col == 'createDate' ">
              {{ text }}
            </template>
            <template v-if="!record.editable && col == 'relay' ">
              {{ text==1? '是':'否' }}
            </template> -->
            <!--            <template v-if=" record.editable && col != 'userName' && col != 'roomNo' && col != 'num' && col != 'deposit' && col != 'goodName' ">-->
            <!--              {{ text }}-->
            <!--            </template>-->
            <template v-if=" !record.editable && col != 'payType'">
              {{ text }}
            </template>
            <a-select v-if=" record.editable && col == 'roomNo' " @change="roomChange($event, record)" v-model="record.livingOrderId" placeholder="请选择房号" style="width: 150px;">
              <a-select-option
                :value="item.livingOrderId"
                v-for="(item, index) in roomsList"
                :key="item.id"
              >
                {{ item.roomName }}/{{ item.customerName }}
              </a-select-option>
            </a-select>
            <a-select v-if="col == 'payType' " v-model:value="record.payType" style="width: 110px " :disabled="!record.editable">
              <a-select-option v-for="type in (record.editable ? record.payTypeList : payTypeList)" :value="type.id" :disabled="type.disable">{{ type.name }}</a-select-option>
            </a-select>
            <a-input-number
              v-if="record.editable && (col == 'num' || col == 'deposit') "
              style="margin: -5px 0;width:100px; width: auto"
              :value="text"
              :default-value="0"
              :min="0"
              @change="e => handleChange(e, record.id, col)"
            />
            <a-select v-if=" record.editable && col == 'goodName' " style="width: 130px " v-model="record.goodsId" placeholder="请选择物品">
              <a-select-option
                :value="item.id"
                v-for="(item, index) in busDictItemList"
                :key="item.id"
              >
                {{ item.itemText }}
              </a-select-option>
            </a-select>
          </div>
        </template>
        <template slot="action" slot-scope="text, record, index">
          <!-- <div>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定删除吗?"
              @confirm="() => handleDelete(record.id)"
            >
              <a>删除</a>
            </a-popconfirm>
          </div> -->
          <span v-if="record.editable">
            <a @click="() => save(record.id, record)">保存</a>
            <a-divider :disabled="editingKey !== ''" type="vertical" />
            <!-- <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.id)"> -->
            <a @click="() => cancel(record.id)">取消</a>
            <!-- </a-popconfirm> -->
          </span>
          <span v-else>
            <template v-if="!record.revertDate">
              <a :disabled="editingKey !== ''" @click="edit(record.id)">编辑</a>
            </template>
            <template v-if="!record.revertDate">
              <a-divider :disabled="editingKey !== ''" type="vertical" />
              <a :disabled="editingKey !== ''" @click="handleRevert(record.id, false)">归还</a>
              <a-divider :disabled="editingKey !== ''" type="vertical" />
              <a :disabled="editingKey !== ''" @click="handleRevert(record.id, true)">归还并退押金</a></template>
          </span>

        </template>
      </a-table>
    </div>

    <ces-order-lease-goods-modal
      ref="modalForm"
      @ok="modalFormOk"
    ></ces-order-lease-goods-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CesOrderLeaseGoodsModal from './modules/leasegoods/CesOrderLeaseGoodsModal'
import { httpAction, postAction, getAction } from '@/api/manage'
export default {
  name: 'LeaseGoods',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    CesOrderLeaseGoodsModal
  },
  props: {
    livingOrderId: {
      type: String,
      default: null
    },
    payTypeList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      description: '客单',
      // 表头
      columns: [
        {
          title: '单号',
          align: 'center',
          dataIndex: 'orderNo',
          width: 147,
          scopedSlots: { customRender: 'orderNo' }
        },
        {
          title: '房号',
          align: 'center',
          dataIndex: 'roomNo',
          width: 200,
          scopedSlots: { customRender: 'roomNo' }
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'userName',
          width: 147,
          scopedSlots: { customRender: 'userName' }
        },
        {
          title: '物品',
          align: 'center',
          dataIndex: 'goodName',
          width: 170,
          scopedSlots: { customRender: 'goodName' }
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'num',
          width: 100,
          scopedSlots: { customRender: 'num' }
        },
        {
          title: '押金',
          align: 'center',
          dataIndex: 'deposit',
          width: 100,
          scopedSlots: { customRender: 'deposit' }
        },
        {
          title: '支付方式',
          align: 'center',
          dataIndex: 'payType',
          width: 130,
          scopedSlots: { customRender: 'payType' }
        },
        {
          title: '租借时间',
          align: 'center',
          width: 147,
          dataIndex: 'createDate'
        },
        {
          title: '归还时间',
          align: 'center',
          width: 147,
          dataIndex: 'revertDate'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 187,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list:
          '/order/cesOrderLeaseGoods/list?livingOrderId=' + this.livingOrderId,
        delete: '/order/cesOrderLeaseGoods/delete',
        deleteBatch: '/order/cesOrderLeaseGoods/deleteBatch',
        exportXlsUrl: '/order/cesOrderLeaseGoods/exportXls',
        importExcelUrl: 'order/cesOrderLeaseGoods/importExcel'
      },
      dictOptions: {},
      superFieldList: [],
      hotelList: [],
      datetime: [],
      dataSourceCopy: [],
      roomsList: [],
      isAddOk: true,
      editingKey: '',
      busDictItemList: []
    }
  },
  created() {
    // getAction("/business/busRoomBookingOrders/living-orders?status=-1", {
    //   current: 1,
    //   size: 99999,
    // }).then((res) => {
    //   if (res.success) {
    //     this.roomsList = res.result.records;
    //     console.log(this.roomsList)
    //   }
    // });
    getAction('/business/busDictItem/list', {
      dictId: '1659108818476990465'
    }).then((res) => {
      if (res.success) {
        this.busDictItemList = res.result.records
      }
    })
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    roomChange(value, record) {
      let find = this.roomsList.find(
          (t) => t.livingOrderId === value
      )
      console.log(find)
      record.payTypeList = find.payTypeList
      this.$forceUpdate()
    },
    handleChange(value, key, column) {
      console.log('fff', value, key, column)
      
      const newData = [...this.dataSource]
      const target = newData.find(item => key === item.id)
      if (target) {
        target[column] = value
        this.dataSource = newData
      }
    },
    add(record) {
      console.log(record)
      let roomInfoList = []
      var vipIndex = this.payTypeList.findIndex((t) => t.name.includes('会员'))
      var danweiIndex = this.payTypeList.findIndex((t) => t.name.includes('单位'))
      record.forEach(e => {
        let roomInfo = {
          roomName: e.roomName,
          roomId: e.roomId,
          customerName: e.livingCustomers[0].customerName,
          vipCustomerId: e.livingOrder.vipCustomerId,
          contractTeamId: e.livingOrder.contractTeamId,
          livingOrderId: e.livingOrder.id,
          payTypeList: []
        }
        let payTypeList = JSON.parse(JSON.stringify(this.payTypeList))
        this.$set(payTypeList[vipIndex], 'disable', e.livingOrder.vipCustomerId == null || e.livingOrder.vipCustomerId === '')
        this.$set(payTypeList[danweiIndex], 'disable', e.livingOrder.contractTeamId == null || e.livingOrder.contractTeamId == '')
        roomInfo.payTypeList = payTypeList
        roomInfoList.push(roomInfo)
      })
      this.roomsList = roomInfoList
      console.log(this.roomsList)
    },
    edit(key) {
      const newData = [...this.dataSource]

      const target = newData.find(item => key === item.id)
      this.editingKey = key
      if (target) {
        console.log(this.roomsList)
        let find = this.roomsList.find(
            (t) => t.livingOrderId === target.livingOrderId
        )
        console.log(find)
        this.$set(target, 'payTypeList', find.payTypeList)
        target.editable = true
        this.dataSource = newData
      }
    },
    save(key) {
      const that = this
      const newData = [...this.dataSource]
      const newCacheData = [...this.dataSourceCopy]
      const target = newData.find(item => key === item.id)
      const targetCache = newCacheData.find(item => key === item.id)
      console.log(this.dataSource)
      if (!target.goodsId) {
        that.$message.warning('请选择物品')
        return
      }
      if (!target.num) {
        that.$message.warning('请输入数量')
        return
      }
      if (target.deposit == null) {
        that.$message.warning('请输入押金')
        return
      }
      if (target.deposit !== 0 && target.payType == null) {
        that.$message.warning('请选择支付方式')
        return
      }
      if (target && targetCache) {
        delete target.editable
        this.dataSource = newData
        Object.assign(targetCache, target)
        this.dataSourceCopy = newCacheData
      }
      that.loading = true
      let httpurl = ''
      let method = ''
      if (!target.id || target.id == 9999) {
        httpurl += '/order/cesOrderLeaseGoods/add'
        method = 'post'
      } else {
        httpurl += '/order/cesOrderLeaseGoods/edit'
        method = 'put'
      }
      if (target.id == 9999) {
        delete target.id
        delete target.payTypeList
      }
      httpAction(httpurl, target, method)
      .then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          // that.$emit("ok");
          // 新增/修改 成功时，重载列表
          this.loadData()
          // 清空列表选中
          this.onClearSelected()
        } else {
          that.$message.warning(res.message)
        }
      })
      .finally(() => {
        that.loading = false
        this.isAddOk = true
      })
      console.log('target', target)
      this.editingKey = ''
    },
    cancel(key) {
      const newData = [...this.dataSource]
      const target = newData.find(item => key === item.id)
      this.editingKey = ''
      if (target) {
        Object.assign(target, this.dataSourceCopy.find(item => key === item.id))
        delete target.editable
        this.dataSource = newData
      }
      if (target.id == 9999) {
        this.dataSource.pop()
        this.isAddOk = true
      }
      this.loadData()
    },
    submitForm() {
      console.log(this.dataSource)
      if (this.dataSource.some(e => e.id === 9999 && (!e.goodsId || !e.num || e.deposit == null))) {
        this.$message.warning('请先补全数据')
        return
      }
      let params = []
      this.dataSource.forEach(e => {
        if (e.id === 9999) {
          let target = Object.assign({}, e)
          delete target.id
          delete target.editable
          params.push(target)
        }
      })
      if (params.length === 0) {
        this.$emit('ok')
        return
      }
      this.loading = true
      postAction('/order/cesOrderLeaseGoods/addBatch', params)
          .then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
            this.loading = false
          })
    },

    handleAdd() {
      var id = null
      console.log('this.livingOrderId', this.livingOrderId)
      if (this.livingOrderId) {
        var ids = this.livingOrderId.split(',')
        id = ids[0]
      }
      // this.$refs.modalForm.add(id);
      // this.$refs.modalForm.title = "新增";
      // this.$refs.modalForm.disableSubmit = false;
      // return
      console.log(this.roomsList)
      let find = this.roomsList.find(
        (t) => t.livingOrderId === id
      )
      
      let roomId = find.roomId
      this.dataSource.push({
        id: 9999,
        livingOrderId: id,
        relay: 1,
        editable: true,
        hotelId: JSON.parse(localStorage.getItem('storeInfo')).id,
        roomId: roomId,
        deposit: 0,
        num: 1,
        payTypeList: find.payTypeList
      })
      this.isAddOk = false
      this.editingKey = 9999
    },
    onChange(e, dateString) {
      this.queryParam.startTime = dateString[0]
      this.queryParam.endTime = dateString[1]
    },
    handleRevert(id, returnDeposit) {
      var that = this
      this.loading = true
      postAction('/order/cesOrderLeaseGoods/revert?returnDeposit=' + returnDeposit, { id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    initDictConfig() {},
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'tenantId', text: '关联租户' })
      fieldList.push({ type: 'string', value: 'hotelId', text: '关联酒店' })
      fieldList.push({ type: 'int', value: 'userId', text: '用户ID' })
      fieldList.push({
        type: 'int',
        value: 'messageType',
        text: '留言类型 1 投诉 2建议'
      })
      fieldList.push({ type: 'string', value: 'images', text: '图片逗号分隔' })
      fieldList.push({ type: 'string', value: 'contentBody', text: '内容' })
      fieldList.push({ type: 'string', value: 'userName', text: '姓名' })
      fieldList.push({ type: 'string', value: 'userMobile', text: '手机号' })
      fieldList.push({ type: 'string', value: 'roomNo', text: '房号' })
      fieldList.push({ type: 'date', value: 'createDate', text: '创建时间' })
      this.superFieldList = fieldList
    },
    loadData(arg) {
      if (this.url.list == 2) {
        return
      }
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          // update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result
          this.dataSourceCopy = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          // update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>
@import "~@assets/less/common.less";
.table-remake /deep/.ant-table-body {
  min-height: 352px !important;
  }
.table-remake /deep/ .ant-empty-normal {
  margin: 140px 0 !important;
}
.table-remake /deep/.ant-table-placeholder{
  margin-top: -320px;
}
</style>
