<template>
  <div class="flex-box">
    <div class="flex-header">
      <Table :list="firstTable" />
    </div>
    <div class="flex-count" v-for="(item, index) in listTable" :key="index">
      <div>
        <el-descriptions class="margin-top" :column="2" :size="size" border>
          <template slot="extra"> </template>
          <el-descriptions-item
            labelStyle="text-align:center;width:10%;background-color:#F3FAFF;color:black;font-size: 15px;font-weight: bold;text-indent: 10px"
          >
            <template slot="label"> 子需求编号 </template>
            {{ item.id }}
          </el-descriptions-item>
          <el-descriptions-item
            labelStyle="text-align:center;width:10%;background-color:#F3FAFF;color:black;font-size: 15px;font-weight: bold;text-indent: 10px"
          >
            <template slot="label"> 需求负责人 </template>
            {{ item.createUser }}
          </el-descriptions-item>
          <el-descriptions-item
            labelStyle="text-align:center;width:10%;background-color:#F3FAFF;color:black;font-size: 15px;font-weight: bold;text-indent: 10px"
          >
            <template slot="label"> 需求名称 </template>
            {{ item.needName }}
          </el-descriptions-item>
          <el-descriptions-item
            labelStyle="text-align:center;width:10%;background-color:#F3FAFF;color:black;font-size: 15px;font-weight: bold;text-indent: 10px"
          >
            <template slot="label"> 系统分类 </template>
            {{ item.reqNum }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="flex-state">
        <div class="flex-title">进度状态</div>
        <div class="flex-img">
          <div
            class="flex-img-count"
            v-for="(items, index) in item.state"
            :key="index"
          >
            <div class="flex-text">{{ items.name }}</div>
            <div class="flex-time flex-text">{{ items.time }}</div>
            <img :src="items.imgUrl" alt="" />
          </div>
          <!-- <img src="../../../../assets/jiantou.png" alt=""> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Table from "../components/form.vue";
export default {
  components: {
    Table,
  },

  data() {
    return {
      size: "",
      list: [],
      firstTable: {
        name: "first",
        height: "120",
        titledata: [
          {
            label: "需求决策编号",
            prop: "needNo",
            width: 250,
          },
          {
            label: "需求名称",
            prop: "needName",
            width: 250,
          },
          {
            label: "需求创建时间",
            prop: "proposerTime",
            width: 250,
          },
          {
            label: "需求确认时间",
            prop: "tlTime",
            width: 250,
          },
          {
            label: "需求排期开始时间",
            prop: "paiqiBegin",
            width: 300,
          },
          {
            label: "需求排期结束时间",
            prop: "paiqiEnd",
            width: 250,
          },
          {
            label: "计划上线时间",
            prop: "paiqiPlanOnlineTime",
            width: 200,
          },
          {
            label: "实际上线时间",
            prop: "onlineTime",
            width: 200,
          },
        ], //表格头
        data: [
          // {
          //   date: "2016-05-04",
          //   name: "王小虎",
          //   address: "上海市普陀区金沙江路 1517 弄",
          // },
          //   {
          //     date: "2016-05-01",
          //     name: "王小虎",
          //     address: "上海市普陀区金沙江路 1519 弄",
          //   },
          //   {
          //     date: "2016-05-03",
          //     name: "王小虎",
          //     address: "上海市普陀区金沙江路 1516 弄",
          //   },
        ], //内容数据
        loading: true,
        pageData: {
          total: 0, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false, // 表格有多选时设置
        isOperation: false, // 表格有操作列时设置
        isIndex: false, // 列表序号
        // operation: {
        //   // 表格有操作列时设置
        //   label: "操作", // 列名
        //   width: "50", // 根据实际情况给宽度
        //   data: [
        //   ],
        // },
      },
      listTable: [],
      listImg: [
        {
          name: "创建时间",
          time: "123123123",
          imgUrl: require("../../../../assets/a_img1.png"),
        },
        {
          name: "确认时间",
          time: "123123123",
          imgUrl: require("../../../../assets/a_img2.png"),
        },
        {
          name: "排期时间",
          time: "123123123",
          imgUrl: require("../../../../assets/a_img3.png"),
        },
        {
          name: "开发完成时间",
          time: "123123123",
          imgUrl: require("../../../../assets/a_img4.png"),
        },
        {
          name: "测试完成时间",
          time: "123123123",
          imgUrl: require("../../../../assets/a_img5.png"),
        },
        {
          name: "上线时间",
          time: "123123123",
          imgUrl: require("../../../../assets/a_img6.png"),
        },
      ],
      needNo: "",
    };
  },
  created() {
    this.needNo = this.$route.query.id;
    this.getQueryList();
  },
  methods: {
    getQueryList() {
      this.$http({
        url: "/market/relation/getRelation",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        // 20221214001
        data: {
          needNo:this.needNo,
        },
      }).then((res) => {
        this.firstTable.data.push(res.data);
        this.listTable = res.data.cwfInfo;
        this.listTable.map((item) => {
          console.log(item);
          item.state.map((items, index) => {
            if (items.status === false) {
              items.imgUrl = require("../../../../assets/b_img" +
                (index + 1) +
                ".png");
            } else {
              items.imgUrl = require("../../../../assets/a_img" +
                (index + 1) +
                ".png");
            }
          });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
//
::v-deep .el-table {
  border-radius: 10px;
}
.flex-box {
  padding: 1%;
  border-radius: 20px !important;
  .flex-count {
    width: 100%;
    padding: 1%;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 10px;
    margin-bottom: 40px;
    .flex-state {
      margin-top: 20px;
      border: 1px solid #e8e8e8;
      .flex-title {
        height: 40px;
        line-height: 40px;
        background-color: #f3faff;
        border-bottom: 1px solid #e8e8e8;
        font-size: 15px;
        font-weight: bold;
        text-indent: 10px;
      }
      .flex-img {
        display: flex;
        margin: 30px;
        background: url("../../../../assets/jiantou1.png");
        background-repeat: no-repeat;
        background-position: 30px 75%;
        background-size: 97% 30%;
        .flex-img-count {
          margin-left: 20px;
          width: 15%;
          text-align: center;

          .flex-text {
            font-size: 16px;
          }
          .flex-time {
            margin-top: 5px;
            margin-bottom: 10%;
            height: 16px;
          }
        }
      }
    }
  }
}
</style>