<!-- 业务组件 用户签收 -->
<template>
  <div class="component_BTCPCustomerSign">
    <van-field
      v-model="item.props[0].value"
      readonly
      clickable
      clearable
      :name="item.label"
      :value="item.props[0].value"
      :label="item.label"
      :required="item.props[0].required"
      right-icon="arrow"
      :placeholder="`点击选择${item.label}`"
      :rules="rules(item.props[0], item.label)"
      @click="selectChange(item)"
    />
    <van-popup
      v-model="showPicker"
      position="bottom"
    >
      <van-picker
        show-toolbar
        :columns="options"
        :default-index="selectDeafultIndex"
        value-key="label"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-popup
      v-model="loading"
      position="right"
      :style="{ width: '70%', height: '100%' }"
    >
      <div class="orderBox orderBox-noPadding">
        <p class="changepart_content_header">签收清单</p>
        <div
          v-if="dataList.length <= 0 "
          class="orderBox-content"
        >
          <custom-cell
            label="换上件条码"
            value=""
          />
          <custom-cell
            label="备件类别"
            value=""
          />
          <custom-cell
            label="状态"
            value=""
          />
        </div>
        <div
          v-for="(info, index) in dataList"
          :key="index"
          :class="index > 0 ? 'orderBox-content mt10' : 'orderBox-content'"
        >
          <div>
            <custom-cell
              label="换上件条码"
              :value-style="{width: '80px !important'}"
              :value="info.spsn"
            />
            <custom-cell
              label="备件类别"
              :value="info.materialClassName"
            />
            <custom-cell
              label="状态"
              :value="info.prStatusName"
            />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { listPR } from './../../api/ReserveParts'
import { getDictByCode } from './../../api'

export default {
  name: 'BTCPCustomerSign',
  props: {
    item: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    },
    isValidate: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 工单号
    soId: {
      type: String,
      default () {
        return ''
      }
    },
    // 校验规则
    rules: {
      type: Function,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      loading: false,
      dataList: [],
      showPicker: false,
      options: [],
      selectDeafultIndex: 1,
      currentPicker: {}
    }
  },
  computed: {
    showTable () {
      return this.item.props[0].value === '用户签收'
    }
  },
  watch: {
    'item.props': {
      handler () {
        this.item.componentFeedback[0].value = [{
          SignResult: this.item.props[0].value
        }]
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.getOptionsAjax()
  },
  methods: {
    selectChange (info) {
      this.currentPicker = info
      this.showPicker = true
    },
    onConfirm (item, index) {
      this.currentPicker.props[0].value = item.value
      this.showPicker = false
      this.getPartsList()
    },
    // 获取下拉
    getOptionsAjax () {
      getDictByCode('CustomerSignResult').then(res => {
        if (res.code === 200) {
          this.options = (res.data || []).map(item => {
            return {
              label: item.paraValue,
              value: item.paraValue
            }
          })
          this.options.forEach((item, index) => {
            if (item.value === this.currentPicker.value) {
              this.selectDeafultIndex = index
            }
          })
        }
      }).catch(() => {
      })
    },
    // 获取换件信息
    getPartsList () {
      this.dataList = []
      if (!this.soId || this.item.props[0].value !== '用户签收') return false
      this.loading = true
      const fn = listPR
      fn({
        pageSize: 100,
        soid: this.soId,
        isDisplayCancel: false
      }).then(res => {
        if (res.code === 200) {
          this.dataList = res.rows || []
        }
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.changepart_content_header {
  background: #F5F5F5;
  padding: 10px 10px 0 10px;
  color: #9E9E9E;
}
</style>
