<template>
  <view class="product-rel">
    <view class="header">
      <image class="opCollapse" src="/static/images/title.png" />
      <text class="title">明细信息</text>
      <view class="ops">
        <image v-if="(mode === 'add' || mode === 'edit') && !isSupplement && !isSelectWorkshop" class="opAdd" @click="onAdd" src="/static/images/plus.png" />
        <view v-if="mode === 'view'" class="op1" @click="toggleViewCollapse">
          <image class="opAdd" :src="collapsedView ? '/static/images/down.png' : '/static/images/up.png'" />
          <text class="op">{{ collapsedView ? '展开' : '收起' }}</text>
        </view>
      </view>
    </view>

    <view v-if="mode === 'add' || mode === 'edit'" class="add-list">
      <view v-for="(item, idx) in items" :key="item._key || idx" class="block">
        <uni-list v-show="!item.collapsed">
          <uni-list-item
            class="select-item"
            :class="item.productName ? 'is-filled' : 'is-empty'"
            :clickable="!isSelectWorkshop && !isSupplement"
            @click="!isSelectWorkshop && !isSupplement ? openSelectSheet('product', idx) : undefined"
            :rightText="item.productName || (isSelectWorkshop || isSupplement ? '-' : '请选择品种')"
            :showArrow="!isSelectWorkshop && !isSupplement"
          >
            <template v-slot:body>
              <view class="item-title" :class="{ 'no-required': isSelectWorkshop || isSupplement }">
                <text v-if="!isSelectWorkshop && !isSupplement" class="required">*</text><text>品种</text>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item title="料型">
            <template v-slot:footer>
              <uni-easyinput v-if="!isSelectWorkshop && !isSupplement" v-model="item.materialType" :inputBorder="false" placeholder="请输入料型" />
              <text v-else class="lock-value">{{ safeText(item.materialType) }}</text>
            </template>
          </uni-list-item>
          <uni-list-item title="数量（吨）">
            <template v-slot:footer>
              <template v-if="!isSelectWorkshop && !isSupplement">
                <uni-easyinput
                  v-model="item.quantity"
                  type="digit"
                  :inputBorder="false"
                  placeholder="请输入数量"
                  @input="onNonNegativeInput(idx, 'quantity')"
                  @blur="onNonNegativeBlur(idx, 'quantity', 4)"
                />
              </template>
              <text v-else class="lock-value">{{ formatTextNumber(item.quantity) }}</text>
            </template>
          </uni-list-item>
          <uni-list-item title="实际采购价">
            <template v-slot:footer>
              <template v-if="!isSelectWorkshop && !isSupplement">
                <uni-easyinput
                  v-model="item.actualPurchasePrice"
                  type="digit"
                  :inputBorder="false"
                  placeholder="请输入实际采购价"
                  @input="onNonNegativeInput(idx, 'actualPurchasePrice')"
                  @blur="onNonNegativeBlur(idx, 'actualPurchasePrice', 2)"
                />
              </template>
              <text v-else class="lock-value">{{ formatTextNumber(item.actualPurchasePrice) }}</text>
            </template>
          </uni-list-item>
          <uni-list-item title="含运到厂价">
            <template v-slot:footer>
              <text class="lock-value">{{ formatTextNumber(item.includingShippingPrice) }}</text>
            </template>
          </uni-list-item>
          <uni-list-item title="价格表价格">
            <template v-slot:footer>
              <uni-easyinput
                v-if="!isSelectWorkshop"
                v-model="item.priceListPrices"
                type="digit"
                :inputBorder="false"
                placeholder="请输入价格表价格"
                @input="onNonNegativeInput(idx, 'priceListPrices')"
                @blur="onNonNegativeBlur(idx, 'priceListPrices', 2)"
              />
              <text v-else class="lock-value">{{ formatTextNumber(item.priceListPrices) }}</text>
            </template>
          </uni-list-item>
          <uni-list-item title="协调幅度">
            <template v-slot:footer>
              <text class="lock-value">{{ formatTextNumber(item.coordinationRange) }}</text>
            </template>
          </uni-list-item>
          <uni-list-item title="买断料预计损耗">
            <template v-slot:footer>
              <template v-if="!isSelectWorkshop && !isSupplement">
                <uni-easyinput
                  v-model="item.estimatedLoss"
                  type="digit"
                  :inputBorder="false"
                  placeholder="请输入预计损耗"
                  @input="onNonNegativeInput(idx, 'estimatedLoss')"
                  @blur="onNonNegativeBlur(idx, 'estimatedLoss', 2)"
                />
              </template>
              <text v-else class="lock-value">{{ formatTextNumber(item.estimatedLoss) }}</text>
            </template>
          </uni-list-item>
          <uni-list-item title="申请损耗（%）">
            <template v-slot:footer>
              <template v-if="!isSelectWorkshop && !isSupplement">
                <uni-easyinput
                  v-model="item.applicationAttrition"
                  type="digit"
                  :inputBorder="false"
                  placeholder="请输入申请损耗"
                  @input="onNonNegativeInput(idx, 'applicationAttrition')"
                  @blur="onNonNegativeBlur(idx, 'applicationAttrition', 2)"
                />
              </template>
              <text v-else class="lock-value">{{ formatTextNumber(item.applicationAttrition) }}</text>
            </template>
          </uni-list-item>
          <uni-list-item
            class="select-item"
            :class="item.workshopName ? 'is-filled' : 'is-empty'"
            :clickable="!isSupplement"
            @click="!isSupplement ? openSelectSheet('workshop', idx) : undefined"
            :rightText="item.workshopName || (isSupplement ? '-' : '请选择分厂')"
            :showArrow="!isSupplement"
          >
            <template v-slot:body>
              <view class="item-title" :class="{ 'no-required': isSupplement }">
                <text v-if="!isSupplement" class="required">*</text><text>选择分厂</text>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
        <uni-list v-show="item.collapsed">
          <uni-list-item
            class="select-item"
            :class="item.productName ? 'is-filled' : 'is-empty'"
            :clickable="!isSelectWorkshop && !isSupplement"
            @click="!isSelectWorkshop && !isSupplement ? openSelectSheet('product', idx) : undefined"
            :rightText="item.productName || (isSelectWorkshop || isSupplement ? '-' : '请选择品种')"
            :showArrow="!isSelectWorkshop && !isSupplement"
          >
            <template v-slot:body>
              <view class="item-title" :class="{ 'no-required': isSelectWorkshop || isSupplement }">
                <text v-if="!isSelectWorkshop && !isSupplement" class="required">*</text><text>品种</text>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
        <view class="block-ops" :class="{ 'readonly-ops': isSelectWorkshop || isSupplement }">
          <div v-if="!isSelectWorkshop && !isSupplement" class="del" @click="onRemove(idx)">
            <image src="/static/images/delete.png" class="icon" />
            删除
          </div>
          <div class="toggle" @click="toggleItem(idx)">
            <image :src="item.collapsed ? '/static/images/up.png' : '/static/images/down.png'" class="icon" />
            {{ item.collapsed ? '展开' : '收起' }}
          </div>
        </view>
      </view>
    </view>

    <view v-else class="view-list" v-show="!collapsedView">
      <view v-if="!items.length" class="empty-tip">暂无明细</view>
      <view v-for="(item, idx) in items" :key="'v-' + (item._key || item.itemId || idx)" class="card">
        <view class="row"><text class="label">品种</text><text class="value">{{ safeText(item.productName || item.productId) }}</text></view>
        <view class="row"><text class="label">料型</text><text class="value">{{ safeText(item.materialType) }}</text></view>
        <view class="row"><text class="label">数量（吨）</text><text class="value">{{ formatNumber(item.quantity) }}</text></view>
        <view class="row"><text class="label">实际采购价</text><text class="value">{{ formatNumber(item.actualPurchasePrice) }}</text></view>
        <view class="row"><text class="label">含运到厂价</text><text class="value">{{ formatNumber(item.includingShippingPrice) }}</text></view>
        <view class="row"><text class="label">价格表价格</text><text class="value">{{ formatNumber(item.priceListPrices) }}</text></view>
        <view class="row"><text class="label">协调幅度</text><text class="value">{{ formatNumber(item.coordinationRange) }}</text></view>
        <view class="row"><text class="label">买断料预计损耗</text><text class="value">{{ formatNumber(item.estimatedLoss) }}</text></view>
        <view class="row"><text class="label">申请损耗（%）</text><text class="value">{{ formatNumber(item.applicationAttrition) }}</text></view>
        <view class="row"><text class="label">分厂</text><text class="value">{{ safeText(item.workshopName || item.workshopId) }}</text></view>
      </view>
    </view>

    <SingleSelectSheet
      :visible.sync="sheet.visible"
      :title="sheet.title"
      :options="sheet.options"
      v-model="sheet.value"
      @confirm="onSheetConfirm"
    />
  </view>
</template>

<script>
import SingleSelectSheet from '@/components/single-select/index.vue'

export default {
  name: 'DomesticPlanProductRel',
  props: {
    mode: { type: String, default: 'view' },
    scene: { type: String, default: '' },
    list: { type: Array, default: function () { return [] } },
    max: { type: Number, default: 50 },
    productOptions: { type: Array, default: function () { return [] } },
    workshopOptions: { type: Array, default: function () { return [] } }
  },
  components: { SingleSelectSheet },
  data() {
    return {
      items: [],
      collapsedView: false,
      sheet: { visible: false, title: '请选择', options: [], value: '', idx: -1, type: '' },
      _initialized: false
    }
  },
  computed: {
    isSupplement() { return this.scene === 'supplement' },
    isSelectWorkshop() { return this.scene === 'selectWorkshop' },
    productOptsComputed() {
      var list = Array.isArray(this.productOptions) ? this.productOptions : []
      return list.map(function (o) {
        return {
          label: o.label != null ? o.label : (o.name != null ? o.name : (o.productName || '')),
          value: o.value != null ? o.value : (o.id != null ? o.id : o.productId)
        }
      })
    },
    workshopOptsComputed() {
      var list = Array.isArray(this.workshopOptions) ? this.workshopOptions : []
      return list.map(function (o) {
        return {
          label: o.label != null ? o.label : (o.name != null ? o.name : (o.workshopName || '')),
          value: o.value != null ? o.value : (o.id != null ? o.id : o.workshopId)
        }
      })
    }
  },
  watch: {
    items: {
      handler() { this.emitChange() },
      deep: true
    },
    list: {
      handler(v) {
        this._initialized = false
        this.initItems()
        var self = this
        this.$nextTick(function () { self._initialized = true })
      },
      immediate: false
    }
  },
  created() {
    this.initItems()
    var self = this
    this.$nextTick(function () { self._initialized = true })
  },
  methods: {
    initItems() {
      var src = Array.isArray(this.list) && this.list.length > 0 ? this.list : []
      if (!src.length) {
        if (this.mode === 'add' || this.mode === 'edit') {
          this.items = [Object.assign({}, this.defaultItem(), { _key: this.newKey(), collapsed: false })]
        } else {
          this.items = []
        }
        return
      }
      var existing = this.items || []
      var existingMap = {}
      existing.forEach(function (it) {
        if (it.itemId) existingMap[it.itemId] = it
      })
      var self = this
      this.items = src.map(function (x, i) {
        var key = x && x.itemId ? x.itemId : (x && x._key ? x._key : self.newKey())
        var old = existingMap[key]
        return Object.assign({}, self.defaultItem(), x, {
          _key: key,
          itemId: x && x.itemId ? x.itemId : key,
          collapsed: old ? old.collapsed : true
        })
      })
    },
    newKey() {
      return Date.now() + '-' + Math.random().toString(16).slice(2)
    },
    defaultItem() {
      return {
        productId: '',
        productName: '',
        materialType: '',
        quantity: '',
        actualPurchasePrice: '',
        includingShippingPrice: '',
        priceListPrices: '',
        coordinationRange: '',
        estimatedLoss: '',
        applicationAttrition: '',
        workshopId: '',
        workshopName: ''
      }
    },
    onNonNegativeInput(idx, field) {
      var it = this.items[idx]
      if (!it) return
      var v = String(it[field] != null ? it[field] : '')
      v = v.replace(/[^0-9.]/g, '')
      v = v.replace(/(\..*)\./g, '$1')
      it[field] = v
      this.$set(this.items, idx, it)
    },
    onSignedInput(idx, field) {
      var it = this.items[idx]
      if (!it) return
      var v = String(it[field] != null ? it[field] : '')
      var sign = ''
      if (v.charAt(0) === '-') { sign = '-'; v = v.slice(1) }
      v = v.replace(/[^0-9.]/g, '')
      v = v.replace(/(\..*)\./g, '$1')
      it[field] = sign + v
      this.$set(this.items, idx, it)
    },
    onNonNegativeBlur(idx, field, digits) {
      var it = this.items[idx]
      if (!it) return
      var raw = it[field]
      if (raw === '' || raw === null || raw === undefined) {
        this.$set(this.items, idx, it)
        return
      }
      var val = parseFloat(raw)
      if (isNaN(val)) val = 0
      var m = Math.pow(10, digits)
      var rounded = Math.round(val * m) / m
      it[field] = rounded
      this.$set(this.items, idx, it)
    },
    onAdd() {
      if (this.items.length >= this.max) {
        uni.showToast({ title: '最多' + this.max + '条明细', icon: 'none' })
        return
      }
      this.items.push(Object.assign({}, this.defaultItem(), { _key: this.newKey(), collapsed: false }))
    },
    onRemove(idx) {
      this.items.splice(idx, 1)
      if ((this.mode === 'add' || this.mode === 'edit') && this.items.length === 0) {
        this.items.push(Object.assign({}, this.defaultItem(), { _key: this.newKey(), collapsed: false }))
      }
    },
    toggleItem(idx) {
      var it = this.items[idx]
      if (!it) return
      this.$set(it, 'collapsed', !it.collapsed)
    },
    toggleViewCollapse() {
      this.collapsedView = !this.collapsedView
    },
    openSelectSheet(type, idx) {
      if (type === 'product') {
        var pOpts = this.productOptsComputed
        var curP = this.items[idx] && this.items[idx].productId
        var mP = pOpts.find(function (o) { return String(o.value) === String(curP) })
        this.sheet = { visible: true, title: '请选择品种', options: pOpts, value: mP ? mP.value : '', idx: idx, type: type }
      } else if (type === 'workshop') {
        var wOpts = this.workshopOptsComputed
        var curW = this.items[idx] && this.items[idx].workshopId
        var mW = wOpts.find(function (o) { return String(o.value) === String(curW) })
        this.sheet = { visible: true, title: '请选择分厂', options: wOpts, value: mW ? mW.value : '', idx: idx, type: type }
      }
    },
    onSheetConfirm(_ref) {
      var value = _ref.value
      var label = _ref.label
      var idx = this.sheet.idx
      var type = this.sheet.type
      if (idx < 0 || !this.items[idx]) return
      var it = this.items[idx]
      if (type === 'product') {
        this.$set(it, 'productId', value)
        this.$set(it, 'productName', label)
      } else if (type === 'workshop') {
        this.$set(it, 'workshopId', value)
        this.$set(it, 'workshopName', label)
      }
    },
    emitChange() {
      if (!this._initialized) return
      var list = (this.items || []).map(function (it) {
        var c = Object.assign({}, it)
        var key = c._key
        delete c._key
        delete c.collapsed
        delete c._selected
        if (!c.itemId) c.itemId = key
        return c
      })
      this.$emit('change', list)
    },
    safeText(v) {
      var s = v == null ? '' : String(v)
      return s.trim() ? s : '-'
    },
    formatNumber(v) {
      if (v == null || v === '') return '-'
      var n = Number(v)
      if (isNaN(n)) return String(v)
      return n.toLocaleString('zh-CN', { maximumFractionDigits: 4 })
    },
    formatTextNumber(v) {
      if (v == null || v === '') return '-'
      var n = Number(v)
      if (isNaN(n)) return String(v)
      return n.toLocaleString('zh-CN', { maximumFractionDigits: 4 })
    },
    validate() {
      var list = this.items || []
      for (var i = 0; i < list.length; i++) {
        var it = list[i]
        if (!this.isSupplement && !this.isSelectWorkshop && !it.productId) {
          uni.showToast({ title: '第' + (i + 1) + '条明细：请选择品种', icon: 'none' })
          return false
        }
        if (!this.isSupplement && !it.workshopId) {
          uni.showToast({ title: '第' + (i + 1) + '条明细：请选择分厂', icon: 'none' })
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.product-rel {
  margin-top: 20rpx;
  background: #fff;
}
.header {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.title {
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 600;
}
.ops {
  margin-left: auto;
}
.op {
  color: $theme-primary;
  font-size: 28rpx;
  margin-left: 8rpx;
}
.op1 {
  display: flex;
  align-items: center;
}
.opAdd {
  color: rgba(0, 0, 0, 0.6);
  width: 40rpx;
  height: 40rpx;
}
.opCollapse {
  color: rgba(0, 0, 0, 0.6);
  width: 32rpx;
  height: 28rpx;
  margin-right: 16rpx;
  margin-top: 8rpx;
}
.block {
  background: #fff;
  margin-bottom: 20rpx;
}
::v-deep .uni-list-item__content {
  display: flex;
  justify-content: center;
}
::v-deep .uni-list {
  .uni-easyinput {
    display: flex;
    .uni-input-input {
      color: rgba(0, 0, 0, 0.9);
    }
  }
  .uni-input-placeholder { z-index: 1; }
  .uni-input-input { background-color: #ffffff; }
  background: transparent;
  &-item {
    &__container { padding: 32rpx; }
    &__content-title {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
    }
    &__extra-text { font-size: 32rpx; }
    .uni-easyinput {
      width: 100%;
      &__placeholder-class {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.4);
      }
      &__content {
        border: none;
        background-color: #ffffff !important;
        display: flex;
        &-input {
          padding-left: 0 !important;
          height: 48rpx;
          line-height: 48rpx;
          font-size: 32rpx;
        }
      }
    }
    &.select-item {
      &.is-empty {
        .uni-list-item__extra-text { color: rgba(0, 0, 0, 0.4) !important; }
      }
      &.is-filled {
        .uni-list-item__extra-text { color: rgba(0, 0, 0, 0.9) !important; }
      }
    }
  }
}

::v-deep .uni-easyinput {
  width: 100%;
  &__content {
    background: #f8f8f8 !important;
    border-radius: 8rpx;
    &-input { font-size: 30rpx; }
  }
}
.block-ops {
  display: flex;
  padding: 20rpx 32rpx 20rpx;
  justify-content: space-around;
  &.readonly-ops {
    justify-content: flex-end;
  }
}
.del {
  color: #D54941;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  image { width: 40rpx; height: 40rpx; }
}
.toggle {
  color: $theme-primary;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  image { width: 40rpx; height: 40rpx; }
}
.view-list {
  padding: 24rpx 32rpx;
  background: #ffffff;
}
.empty-tip {
  text-align: center;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.4);
  padding: 24rpx 0;
}
.card {
  background: #f3f3f3;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.row {
  display: flex;
  margin-bottom: 20rpx;
}
.row:last-child { margin-bottom: 0; }
.label {
  width: 260rpx;
  color: rgba(0, 0, 0, 0.6);
  font-size: 28rpx;
}
.value {
  flex: 1;
  color: rgba(0, 0, 0, 0.9);
  font-size: 28rpx;
  word-break: break-all;
}
.item-title {
  position: relative;
  width: 210rpx;
  margin-right: 32rpx;
  color: rgba(0, 0, 0, 0.9);
  font-size: 32rpx;
  min-height: 48rpx;
  line-height: 48rpx;
  .required {
    color: red;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -16rpx;
  }
}
.lock-value {
  flex: 1;
  text-align: right;
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.85);
  padding: 8rpx 0;
}
</style>