<template>
  <div class="pandect_select" v-transfer-dom>
    <x-dialog v-model="show">
      <div class="pandect_box">
        <h4>{{title}}</h4>
        <div class="pandect_content">
          <ul v-if="type === 'supplier'">
            <li @click="check(index)" v-for="(item, index) in data" :key="index" :class="{'actived': item.checked}">{{item.prov_name}}</li>
          </ul>
          <ul v-if="type === 'materiel'">
            <li @click="check(index)" v-for="(item, index) in data" :key="index" :class="{'actived': item.checked}">{{item.name}}</li>
          </ul>
          <ul v-if="type === 'route'">
            <li @click="check(index)" v-for="(item, index) in data" :key="index" :class="{'actived': item.checked}">{{item.name}}</li>
          </ul>
        </div>
        <div class="btn-box">
          <div class="close" @click="close">关闭</div>
          <div class="confirm" @click="confirm">确定</div>
        </div>
      </div>
    </x-dialog>
  </div>
</template>

<script>
/**
 * 订货送货计划总览选择框组件
 *
 *
 * @param    {string}  title     标题
 * @param    {array}   list      可选择的内容
 * @param    {boolean}  show     是否显示组件
 * @param    {string}   type     类型（根据不同类型，供应商、物料、送货线路，获取到的后端数组字段不同，遍历显示的方式也不同）
 * @returns  {object}
 *
 * @date     2018-08-31
 */
import { XDialog, TransferDomDirective as TransferDom } from 'vux'
export default {
  components: { XDialog, TransferDom },
  props: ['title', 'list', 'show', 'type'],
  data () {
    return {
      data: []
    }
  },
  watch: {
    list: function (val) {
      /**
       * 需要使用watch方法来监听外部传入list是否改变，然后使用数组push方法触发子组件视图更新
       * ------------------------------------------------------------------
       */
      this.$vux.loading.hide();
      this.data = [];
      for (let i = 0; i < val.length; i++) {
        // 给每条内容添加一个checked属性，是否选择
        val[i].checked = false;
        this.data.push(val[i])
      }
    }
  },
  methods: {
    check (index) {
      /**
       * 选择某一条内容时，将所有内容的checked设false，并将被选择的内容checked设为true，单选效果
       * ------------------------------------------------------------------
       */
      let arr = []
      this.data.forEach(v => {
        arr.push(v);
      });
      this.data = [];
      arr.forEach((v, i) => {
        v.checked = false;
        if (i === index) {
          v.checked = true;
        }
        this.data.push(v);
      });
    },
    close () {
      // 关闭
      this.$emit('close');
    },
    confirm () {
      /**
       * 确认时，返回选中的内容
       * ------------------------------------------------------------------
       */
      let data = null;
      this.data.forEach(v => {
        if (v.checked) {
          data = v;
        }
      });
      this.$emit('confirm', _.cloneDeep(data));
    }
  }
}
</script>

<style lang="less" scoped>
  .pandect_select {
    font-size: 14px;
    color: #666;
    .pandect_box {
      position: relative;
      padding-bottom: 3rem;
      .pandect_content {
        max-height: 20rem;
        overflow-y: auto;
      }
    }
    h4 {
      font-size: 18px;
      color: #333;
      padding: 0.4rem 0;
      text-align: center;
      border-bottom: 1px solid #eee;
    }
    ul {
      margin: 0;
      list-style: none;
      padding: 0 0.8rem;
      li {
        padding: 0.4rem 0.6rem;
        background: #eee;
        margin: 0.6rem 0;
      }
      .actived {
        background: #8ea8cf;
        color: #fff;
      }
    }
    .btn-box {
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: space-around;
      div {
        width: 48%;
        border-radius: 5px;
        border: 1px solid #8ea8cf;
        text-align: center;
        padding: 0.4rem 0;
      }
      .close {
        color: #8ea8cf;
        background: #fff;
      }
      .confirm {
        color: #fff;
        background: #8ea8cf;
      }
    }
  }
</style>