<template>
  <FootDialog
    title="请选择售后类型"
    titleClass="title-center"
    :isRadius="false"
    :isCloseBtn="false"
    :visible.sync="dialogShow"
    :zIndex="300"
  >
    <view slot="main" class="choose-list-wrap">
      <view v-for="(item,idx) in dataList" :key="idx" class="item" @tap="tapCheck(idx)">
        <view class="lt-warp">{{item.label}}</view>
        <view class="rt-wrap">
          <image class="dt-checked" :src="item.checked?'http://139.9.103.171:1888/img/image/03.171:1888/img/imaghttp://139.9.103.171:1888/img/image/n.png':'http://139.9.103.171:1888/img/image/no_selected_icon.png'" mode="widthFix"></image>
        </view>
      </view>
      <button class="btn-submit" @tap="tapChoose">确认</button>
    </view>
  </FootDialog>
</template>
<script>
import FootDialog from "./foot_dialog.vue";
export default {
  components: {
    FootDialog,
  },
  props:{
    dataList:{
      type:Array,
      default:()=>{
        return [] // [{label:'选项',value:1}]
      }
    },
    type:{
      type:Number,
      default:-1, 
    }
  },
  data() {
    return {
      curCheck:{},
      dialogShow: false
    };
  },
  methods: {
    show(type=-1) {
      let dataList = this.dataList.slice(0)
      dataList.map((item)=>{
        if(type==item.value){
          item.checked = true
          this.curCheck = item
        }else{
          item.checked = false
        }
        return item
      })
      this.$emit('update:dataList',dataList)
      this.dialogShow = true;
    },
    tapCheck(idx){
      let dataList = this.dataList.slice(0)
      dataList.map((item)=>{
        item.checked = false
        return item
      })
      dataList[idx].checked = true
      this.curCheck = dataList[idx]
      this.$emit('update:dataList',dataList)
    },
    tapChoose() {
      this.dialogShow = false;
      this.$emit("choose", this.curCheck);
    }
  },
};
</script>
<style lang="scss">
.choose-list-wrap{
  border-top: 2upx solid #f2f2f2;

  .item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 30upx;
    color: #353535;
    justify-content: space-between;
    margin-top: 0;
    min-height: 100upx;
    border-bottom: 2upx solid #f2f2f2;
    background: #fff;

    .lt-warp {
      display: flex;
      align-items: center;
      text {
        max-height: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
      }
    }
    .rt-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width:50vw;
      height:100upx;
      
    }
  }

  .btn-submit{
    margin:50upx auto;
    display:flex;
    justify-content: center;
    align-items: center;
    width:690upx;
    height:80upx;
    border-radius:6upx;
    background-color: $dt-color-primary;
  }
  .dt-checked{
    display: flex;
    width:40upx;
    height:40upx;
  }
}


</style>
