<template>
  <div>
    <van-action-sheet v-model="show" title="Call Center派件">
      <div class="content">
        <div class="orderBox">
          <no-data v-if="dataListSelections.length <= 0" />
          <div v-else>
            <div
              v-for="(item, index) in dataListSelections"
              :key="index"
              :class="index > 0 ? 'orderBox-content flex mt10' : 'orderBox-content flex'"
              @click="changeUpClick(item)"
            >
              <div class="upInfo-left">
                <van-icon
                  :class="item.required ? 'checkedIcon' : 'nocheckedIcon'"
                  :name="item.required ? 'checked' : 'circle'"
                />
              </div>
              <form-show background-color="#F8F8F8">
                <form-show-item label="备件编码">{{ item.materialNo }}</form-show-item>
                <form-show-item label="备件描述">{{ item.materialName }}</form-show-item>
                <form-show-item label="部件大类">{{ item.materialClassName }}</form-show-item>
                <form-show-item label="派件状态">{{ item.deleteFlag ? '有效' : '无效' }}</form-show-item>
                <form-show-item label="时间">{{ item.createTime }}</form-show-item>
              </form-show>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-submit">
        <van-button class="btn" type="info" native-type="submit" @click="onSubmit()">提交</van-button>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { getCallCenterDispatch } from './../../api/NoChangeParts'
export default {
  data () {
    return {
      show: false,
      dataListSelections: [],
      selectChangeUpData: []
    }
  },
  methods: {
    init () {
      this.show = true
      this.getDataList()
    },
    changeUpClick (info) {
      this.selectChangeUpData = []
      this.dataListSelections.forEach(item => {
        if (info.materialClassCode === item.materialClassCode) {
          info.required = !info.required
          if (info.required) {
            this.selectChangeUpData.push(info)
          }
        } else {
          item.required = false
        }
      })
    },
    getDataList () {
      getCallCenterDispatch({
        soid: this.$route.query.id
      }).then(res => {
        this.dataListSelections = (res.data || []).map(item => {
          return {
            required: false,
            ...item
          }
        })
      }).catch(() => {
      })
    },
    onSubmit () {
      const obj = this.dataListSelections.find(i => i.required === true)
      if (obj) {
        this.$emit('success', obj)
      }
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .content {
    padding: 0 0 70px;
  }
  .flex {
  display: flex;
}
.upInfo-left {
  width: 12%;
  display: flex;
  padding: 0 10px;
  .checkedIcon {
    font-size: 30px;
    align-self: center;
    color: #E33F2E;
  }
  .nocheckedIcon {
    font-size: 30px;
    align-self: center;
    color: black;
  }
}
</style>
