<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="flex justify-between">
            <div>{{ $t('addItemOut.recipient') }}</div>
            <div class="ibox-tools">
              <el-button type="primary" size="small" @click="goBack">
                <i class="el-icon-close"></i>
                {{ $t('addItemOut.return') }}
              </el-button>
            </div>
          </div>
          <div class="">
            <el-form :model="addItemOutInfo" label-position="right" label-width="120px">
              <el-form-item :label="$t('addItemOut.warehouse')">
                <el-select v-model="addItemOutInfo.shId" @change="_computeFlow" style="width:100%"
                  :placeholder="$t('addItemOut.warehousePlaceholder')">
                  <el-option v-for="(item, index) in addItemOutInfo.storehouses" :key="index" :label="item.shName"
                    :value="item.shId"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item :label="$t('addItemOut.recipient')">
                <el-row>
                  <el-col :span="addItemOutInfo.canChooseEndUserOrNot ? 18 : 24">
                    <el-input :placeholder="$t('addItemOut.contactPlaceholder')"
                      v-model.trim="addItemOutInfo.endUserInfo.staffName" style="width:100%"></el-input>
                  </el-col>
                  <el-col :span="6" v-if="addItemOutInfo.canChooseEndUserOrNot">
                    <el-button type="primary" @click="chooseEndUser">
                      <i class="el-icon-search"></i> {{ $t('addItemOut.selectRecipient') }}
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>

              <el-form-item :label="$t('addItemOut.contactPhone')">
                <el-input :placeholder="$t('addItemOut.phonePlaceholder')"
                  v-model.trim="addItemOutInfo.endUserInfo.staffTel" style="width:100%"></el-input>
              </el-form-item>

              <el-form-item :label="$t('addItemOut.applicationNote')">
                <el-input type="textarea" :placeholder="$t('addItemOut.notePlaceholder')"
                  v-model.trim="addItemOutInfo.description" style="width:100%"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 选择物品 -->
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="flex justify-between">
            <div>{{ $t('addItemOut.itemInfo') }}</div>
            <div class="ibox-tools">
              <el-button type="primary" size="small" style="margin-right:10px;"
                @click="_openSelectResourceStoreInfoModel">
                <i class="el-icon-plus"></i>
                {{ $t('addItemOut.selectItem') }}
              </el-button>
            </div>
          </div>
          <div class="ibox-content">
            <el-table :data="addItemOutInfo.resourceStores" border style="width:100%">
              <el-table-column prop="parentRstName" :label="$t('addItemOut.itemType')" align="center">
                <template slot-scope="scope">
                  {{ scope.row.parentRstName || '-' }} > {{ scope.row.rstName || '-' }}
                </template>
              </el-table-column>

              <el-table-column prop="resName" :label="$t('addItemOut.itemName')" align="center">
                <template slot-scope="scope">
                  {{ scope.row.resName }}({{ scope.row.resCode }})
                </template>
              </el-table-column>

              <el-table-column prop="rssName" :label="$t('addItemOut.itemSpec')" align="center">
                <template slot-scope="scope">
                  {{ scope.row.rssName || '-' }}
                </template>
              </el-table-column>

              <el-table-column :label="$t('addItemOut.price')" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.timesId" @change="_changeTimesId($event, scope.$index)"
                    style="width:100%">
                    <el-option :label="$t('addItemOut.selectPrice')" value=""></el-option>
                    <el-option v-for="time in scope.row.times" :key="time.timesId" :label="time.price"
                      :value="time.timesId"></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column :label="$t('addItemOut.stock')" align="center">
                <template slot-scope="scope">
                  {{ _getTimesStock(scope.row) }}{{ scope.row.unitCodeName }}
                </template>
              </el-table-column>

              <el-table-column :label="$t('addItemOut.applyQuantity')" align="center">
                <template slot-scope="scope">
                  <el-input v-model.trim="scope.row.quantity" type="number"
                    :placeholder="$t('addItemOut.quantityPlaceholder')"
                    style="width:70%;display:inline-block;"></el-input>
                  &nbsp;&nbsp;{{ scope.row.unitCodeName }}
                </template>
              </el-table-column>

              <el-table-column :label="$t('addItemOut.remark')" align="center">
                <template slot-scope="scope">
                  <el-input v-model.trim="scope.row.remark" type="text"
                    :placeholder="$t('addItemOut.remarkPlaceholder')"></el-input>
                </template>
              </el-table-column>

              <el-table-column :label="$t('addItemOut.operation')" align="center">
                <template slot-scope="scope">
                  <el-button type="danger" size="small" @click="_removeSelectResourceStoreItem(scope.row.resId)">
                    <i class="el-icon-delete"></i>
                    {{ $t('addItemOut.remove') }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 审批人 -->
    <el-row v-if="addItemOutInfo.audit.assignee === '-2'">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h5>{{ $t('addItemOut.approver') }}</h5>
          </div>
          <div class="ibox-content">
            <el-form :model="addItemOutInfo" label-position="right" label-width="120px">
              <el-form-item :label="$t('addItemOut.approver')">
                <el-row :gutter="20">
                  <el-col :span="18">
                    <el-input :placeholder="$t('addItemOut.approverPlaceholder')" v-model="addItemOutInfo.audit.staffName"
                      disabled></el-input>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="primary" @click="chooseStaff">
                      <i class="el-icon-search"></i> {{ $t('addItemOut.select') }}
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22" :offset="2" style="margin-bottom:20px; text-align:right">
        <el-button type="primary" @click="_finishStep">
          {{ $t('addItemOut.submit') }}
        </el-button>
      </el-col>
    </el-row>

    <choose-resource-store2 ref="chooseResourceStore2"
      @setSelectResourceStores="handleSetSelectResourceStores"></choose-resource-store2>

    <select-staff ref="selectStaff"></select-staff>
  </div>
</template>

<script>
import { getCommunityId } from '@/api/community/communityApi'
import ChooseResourceStore2 from '@/components/resource/chooseResourceStore2'
import SelectStaff from '@/components/resource/selectStaff'
import { goodsCollection, listStorehouses } from '@/api/resource/addItemOutApi'
import { getUserName, getUserTel } from '@/api/user/userApi'

export default {
  name: 'AddItemOutList',
  components: {
    ChooseResourceStore2,
    SelectStaff,
  },
  data() {
    return {
      addItemOutInfo: {
        resourceStores: [],
        resourceSuppliers: [],
        audit: {
          assignee: '',
          staffId: '',
          staffName: '',
          taskId: ''
        },
        endUserInfo: {
          assignee: '',
          staffId: '',
          staffName: '',
          taskId: '',
          staffTel: ''
        },
        description: '',
        endUserName: '',
        endUserTel: '',
        acceptStaffId: '',
        file: '',
        resOrderType: '20000',
        staffId: '',
        staffName: '',
        communityId: '',
        shId: '',
        storehouses: [],
        flowId: '',
        canChooseEndUserOrNot: false,
      }
    }
  },
  created() {
    this.communityId = getCommunityId()
    this.addItemOutInfo.communityId = this.communityId
    this._reset()
    this.initPage()
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    _reset() {
      this.addItemOutInfo = {
        resourceStores: [],
        resourceSuppliers: [],
        audit: {
          assignee: '',
          staffId: '',
          staffName: '',
          taskId: ''
        },
        endUserInfo: {
          assignee: '',
          staffId: '',
          staffName: '',
          taskId: '',
          staffTel: ''
        },
        description: '',
        endUserName: '',
        endUserTel: '',
        acceptStaffId: '',
        file: '',
        resOrderType: '20000',
        staffId: '',
        staffName: '',
        communityId: this.communityId,
        shId: '',
        storehouses: [],
        flowId: '',
        canChooseEndUserOrNot: false,
      }
    },
    initPage() {
      const from = this.$route.query.from
      if (from === 'resourceStore') {
        this.addItemOutInfo.canChooseEndUserOrNot = true
      }

      this.addItemOutInfo.endUserInfo.staffName = getUserName() || ''
      this.addItemOutInfo.endUserInfo.staffTel = getUserTel() || ''

      this._loadResourceSuppliers()
      this._listPurchaseStorehouses()
    },
    goBack() {
      this.$router.go(-1)
    },
    _resourcesFromSameHouse(resourcesList) {
      if (!resourcesList || resourcesList.length < 2) return true

      let lastHouse = ''
      for (let i = 0; i < resourcesList.length; i++) {
        if (!lastHouse) {
          lastHouse = resourcesList[i].shId
          continue
        }
        if (lastHouse !== resourcesList[i].shId) {
          return false
        }
      }
      return true
    },
    _openSelectResourceStoreInfoModel() {
      if (!this.addItemOutInfo.shId) {
        this.$message.error(this.$t('addItemOut.warehouseRequired'))
        return
      }
      if (!this.addItemOutInfo.endUserInfo.staffName) {
        this.$message.error(this.$t('addItemOut.contactRequired'))
        return
      }
      if (!this.addItemOutInfo.endUserInfo.staffTel) {
        this.$message.error(this.$t('addItemOut.phoneRequired'))
        return
      }
      if (!this.addItemOutInfo.description) {
        this.$message.error(this.$t('addItemOut.noteRequired'))
        return
      }

      this.$refs.chooseResourceStore2.open({
        shId: this.addItemOutInfo.shId
      })
    },
    async _finishStep() {
      const resourceStores = this.addItemOutInfo.resourceStores
      if (!resourceStores || resourceStores.length === 0) {
        this.$message.error(this.$t('addItemOut.itemRequired'))
        return
      }

      if (!this._resourcesFromSameHouse(resourceStores)) {
        this.$message.error(this.$t('addItemOut.sameWarehouseRequired'))
        return
      }

      let validate = true
      resourceStores.forEach(item => {
        const selectedStock = item.selectedStock || 0
        const quantity = parseFloat(item.quantity) || 0

        if (quantity > selectedStock) {
          validate = false
        }
      })

      if (!validate) {
        this.$message.error(this.$t('addItemOut.insufficientStock'))
        return
      }

      this.addItemOutInfo.endUserName = this.addItemOutInfo.endUserInfo.staffName
      this.addItemOutInfo.endUserTel = this.addItemOutInfo.endUserInfo.staffTel
      this.addItemOutInfo.acceptStaffId = this.addItemOutInfo.endUserInfo.staffId

      if (this.addItemOutInfo.canChooseEndUserOrNot) {
        this.addItemOutInfo.useSwitch = "OFF"
      }

      try {
        const res = await goodsCollection(this.addItemOutInfo)
        if (res.code === 0) {
          this.$message.success(this.$t('addItemOut.submitSuccess'))
          this.goBack()
        } else {
          this.$message.error(res.msg || this.$t('addItemOut.submitFailed'))
        }
      } catch (error) {
        this.$message.error(this.$t('addItemOut.submitError'))
        console.error(error)
      }
    },
    _loadResourceSuppliers() {
      // 实际调用API的方法
      // 这里保留占位，实际实现需要调用API
    },
    async _listPurchaseStorehouses() {
      try {
        const res = await listStorehouses({
          page: 1,
          row: 100,
          communityId: "",
          allowPurchase: 'ON'
        })
        this.addItemOutInfo.storehouses = res.data
      } catch (error) {
        console.error('请求失败:', error)
      }
    },
    _removeSelectResourceStoreItem(resId) {
      this.addItemOutInfo.resourceStores = this.addItemOutInfo.resourceStores.filter(
        item => item.resId !== resId
      )
    },
    _changeTimesId(value, index) {
      const times = this.addItemOutInfo.resourceStores[index].times
      times.forEach(item => {
        if (item.timesId === value) {
          this.addItemOutInfo.resourceStores[index].selectedStock = item.stock
        }
      })
    },
    _getTimesStock(resourceStore) {
      if (!resourceStore.timesId) return "-"

      let stock = 0
      resourceStore.times.forEach(item => {
        if (item.timesId === resourceStore.timesId) {
          stock = item.stock
        }
      })

      if (!resourceStore.quantity) {
        resourceStore.quantity = ''
      }

      return stock
    },
    _loadStaffOrg(flowId) {
      // 实际调用API的方法
      // 这里保留占位，实际实现需要调用API
      console.log(flowId)
    },
    chooseStaff() {
      this.$refs.selectStaff.open(this.addItemOutInfo.audit)
    },
    chooseEndUser() {
      this.$refs.selectStaff.open(this.addItemOutInfo.endUserInfo)
    },
    _computeFlow() {
      this.addItemOutInfo.resourceStores = []
      const storehouse = this.addItemOutInfo.storehouses.find(
        item => item.shId === this.addItemOutInfo.shId
      )

      if (storehouse) {
        this.addItemOutInfo.flowId = storehouse.useFlowId
        this._loadStaffOrg(storehouse.useFlowId)
      }
    },
    handleSetSelectResourceStores(resourceStores) {
      const oldList = this.addItemOutInfo.resourceStores
      const newList = [...resourceStores]

      newList.forEach((newItem, newIndex) => {
        newItem.rsId = ''
        newItem.timesId = ''
        if (newItem.times && newItem.times.length > 0) {
          newItem.timesId = newItem.times[0].timesId
        }

        oldList.forEach(oldItem => {
          if (oldItem.resId === newItem.resId && newItem.times && newItem.times.length < 2) {
            delete newList[newIndex]
          }
        })
      })

      const filteredList = newList.filter(item => item['resId'])
      this.addItemOutInfo.resourceStores = [...oldList, ...filteredList]
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.ibox-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ibox-tools {
  position: relative;
  top: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>