<template>
  <div class="app-container">
    <el-row :gutter="20">
      <div class="list_title">挂架名称：{{ hangerInfo.name }} 首数：{{ hangerInfo.firstNum }} 尾数：{{ hangerInfo.endNum }}</div>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="head-container-one" :style="{ border: '1px solid #ccc' }">
          <el-tree :data="hangerList" :props="defaultProps" :expand-on-click-node="false" node-key="id" highlight-current
            @node-click="handleNodeClick"  ref="treeList"/>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="head-column1" :style="{ border: '1px solid #ddd' }">
          <el-radio-group v-model="detailId" size="medium" @input="getClothInfo">
            <el-radio-button v-for="detail in detailList" :key="detail.id" :label="detail.id" border
              :class="detail.isHangerCount>0 ? 'hasCloth' : 'nocloth'"
              :style="detail.isHangerCount>0 ?  {'background-color': '#00ff00', 'border': '1px solid #ddd', 'margin-top': '10px', 'margin-left': '10px' } :  { border: '1px solid #ddd', 'margin-top': '10px', 'margin-left': '10px'}">
              {{ detail.code }}# {{ detail.isHangerCount }} 件 </el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="head-column2" style="margin-top: 20px">
          <el-table v-loading="loading" fit highlight-current-row border stripe :data="clothInfoList">
            <el-table-column label="订单号" align="center" prop="orderNo" />
            <el-table-column label="客户信息" align="center" width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.userName ? scope.row.userName : "--" }}</span>
                <br />
                <span>{{ scope.row.phoneNumber ? scope.row.phoneNumber : "" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="衣物条码" align="center" prop="washCode" />
            <el-table-column label="衣物名称" align="center" prop="clothName" />
            <el-table-column label="颜色" align="center" prop="colorName" />
            <el-table-column label="挂衣号" align="center" prop="hangerCode" />
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.cloth_order_status" :value="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column label="取衣时间" align="center" prop="takeClothTime" />
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getHangerList } from '@/api/cloth/hanger'
import { getClothOrderInfoByHangerCodeAndId, getIsHangerList } from '@/api/cloth/hangerDetail'
export default {
  name: 'goodsPurchase',
  dicts: ['purchase_order_status', 'purchase_refund_status', 'cloth_order_status'],
  data() {
    return {
      nodeKeyId: null,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 9999
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      goodsType: null,
      // 商品订单表格数据
      hangerList: [],
      currentNodeKey: null,
      // 分类id
      goodsCategoryId: null,
      // 可选商品集合
      goodsList: null,
      // 已选商品集合
      addGoodsList: [],
      // 左侧分类集合
      categoryList: null,
      defaultProps: {
        label: 'name'
      },
      hangerInfo: {},
      detailList: [],
      detailId: null,
      clothInfoList: []
    }
  },
  created() {
    this.getList()
    this.hangerInfo.name = '--'
    this.hangerInfo.firstNum = '--'
    this.hangerInfo.endNum = '--'
  },
  computed: {},
  methods: {
    // 节点单击事件
    handleNodeClick(data) {
      this.hangerInfo = data
      this.getHangerDetail()
    
    },
    getHangerDetail() {
      getIsHangerList(this.hangerInfo.id).then((response) => {
        this.detailList = response.data
      })
    },
    getList() {
     let _this = this;
      getHangerList(this.queryParams).then((response) => {
        _this.hangerList = response.rows
        if(this.hangerList){
            this.$nextTick(() => {
            this.$refs.treeList &&
                this.$refs.treeList.setCurrentKey(this.hangerList[0].id); //默认选中第一条
                this.handleNodeClick(this.hangerList[0]); //同时调用树点击事件
            });
        }
      })
    },
    getClothInfo() {
      const vo = this.detailList.find((item) => item.id == this.detailId)
      getClothOrderInfoByHangerCodeAndId(vo.hangerId, vo.code).then((response) => {
        this.clothInfoList = response.data
      })
    }
  }
}
</script>
<style>
.hasCloth {
    .el-radio-button__inner {
        background-color: #81f79f;
    }
}

.list_title {
    text-align: left;
    line-height: 40px;
    margin-left: 30px;
}
.head-container-one {
    height: 300px;
    display: block;
    overflow-y: auto;
}
.head-column1 {
    height: 300px;
    display: block;
    overflow-y: scroll;
}
.head-column2 {
    height: 400px;
    display: block;
    overflow-y: auto;
}
.box-shadow .el-button--medium {
    font-size: 18px;
}
.el-radio-button__inner {
    //border-color: #409eff;
    //background-color: #57f332;
}

.el-radio input + .el-radio label::before {
    border-color: #dcdfe6;
    background-color: #dcdfe6;
}
</style>
