<template>
<!--  私人定制-->
  <div class="sirendingzhi">
    <div class="stepsDiv">
      <Header fontColor="#fff"></Header>

      <!-- <el-steps :active="2">
        <el-step title="服装类型" description="选择定制的服装类型"></el-step>
        <el-step title="款式模块" description="更改各款式模块"></el-step>
        <el-step title="量体数据" description="一人一版量体定制"></el-step>
        <el-step title="购买下单" description="工期视具体情况而定"></el-step>
      </el-steps> -->
      <a-steps :current="current">
        <a-step>
          <template #title>服装类型</template>
          <template #description>
            <span>选择定制的服装类型</span>
          </template>
        </a-step>
        <a-step title="款式模块" description="更改各款式模块" />
        <a-step title="量体数据" description="一人一版量体定制" /><a-step
        title="购买下单"
        description="工期视具体情况而定"
      />
      </a-steps>
    </div>
    <div class="steps__wrapper" v-if="current == 0">
      <div class="title">
        <div class="jz">
          <p>服装类型</p>
        </div>
      </div>
      <div class="main">
        <div class="jz d-flex">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            style="width: 10%; min-width: 140px"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-male"></i>
                <span>男装</span>
              </template>
              <el-menu-item index="1-1">衬衫</el-menu-item>
              <el-menu-item index="1-2">卫衣</el-menu-item>
              <el-menu-item index="1-3">夹克</el-menu-item>
              <el-menu-item index="1-4">T恤</el-menu-item>
              <el-menu-item index="1-5">Polo衫</el-menu-item>
              <el-menu-item index="1-6">针织衫</el-menu-item>
              <el-menu-item index="1-7">羽绒服</el-menu-item>
              <el-menu-item index="1-8">风衣</el-menu-item>
              <el-menu-item index="1-9">西服</el-menu-item>
              <el-menu-item index="1-10">休闲裤</el-menu-item>
              <el-menu-item index="1-11">西裤</el-menu-item>
              <el-menu-item index="1-12">工装裤</el-menu-item>
              <el-menu-item index="1-13">运动裤</el-menu-item>
              <el-menu-item index="1-14">卫裤</el-menu-item>
              <el-menu-item index="1-15">九分裤</el-menu-item>
              <el-menu-item index="1-16">短裤</el-menu-item>
              <el-menu-item index="1-17">哈伦裤</el-menu-item>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-female"></i>
              <span slot="title">女装</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-lollipop"></i>
              <span slot="title">童装</span>
            </el-menu-item>
          </el-menu>
          <div class="right">
            <div class="name d-flex">
              <span>Polo衫</span>
              <div class="d-flex">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    综合<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>按销量排序</el-dropdown-item>
                    <el-dropdown-item>按评分排序</el-dropdown-item>
                    <el-dropdown-item>按价格排序</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <div class="iconDiv d-flex">
                  <span>价格</span>
                  <div class="icon d-flex">
                    <i class="el-icon-arrow-up"></i>
                    <i class="el-icon-arrow-down"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="clothDiv d-flex">
              <div
                class="item"
                v-for="(item, index) in clothsList"
                :key="index"
              >
                <div class="imgDiv">
                  <img :src="item.imgUrl" alt="" />
                  <div class="button c_000 f_16" @click="clothChoice(item)">
                    点击选择
                  </div>
                </div>
                <div class="clothTitle">
                  <p class="price d-flex">
                    <span class="f_16 c_333">￥{{ item.currentPrice }}</span>
                    <span class="f_12 c_999">￥{{ item.historicalPrice }}</span>
                  </p>
                  <p class="f_12 c_333">{{ item.title }}</p>
                  <p class="f_12 c_9a9b9b">热度{{ item.heat }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog
          :visible.sync="dialogVisible"
          width="30%"
          :close-on-click-modal="true"
          :lock-scroll="true"
        >
          <div class="dialogTitle f_24">您确定要选择此款式吗？</div>
          <div class="dialogDiv d-flex">
            <!-- <img src="" alt="" /> -->
            <div class="img"></div>
            <div class="dialogName c_000 f_16">款式#{{ dialogModel.name }}</div>
            <div class="dialogPrice c_999 f_14">
              基础价：¥ {{ dialogModel.price }}
            </div>
          </div>
          <span slot="footer" class="dialog-footer d-flex">
            <div
              @click="dialogVisible = false"
              class="dialogButton default f_14"
            >
              重新选择
            </div>
            <div
              type="primary"
              @click="dialogSure"
              class="dialogButton primary f_14"
            >
              确定，下一步
            </div>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="steps__wrapper" v-if="current == 1"></div>
    <div v-if="current == 3">
      <PlaceOrder></PlaceOrder>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
  import Header from "../components/Header/HeaderView";
  import Footer from "../components/Footer/FooterView";
  import PlaceOrder from "../components/Order/placeOrder"
  export default {
    name: "sirendingzhi",
    components: { Header ,PlaceOrder,Footer},
    data() {
      return {
        current: 3,
        dialogVisible: false,
        dialogModel: {
          imgUrl: "",
          name: "",
          price: 0,
        },
        clothsList: [
          {
            id: 1,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 2,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 3,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 4,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 5,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 6,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 7,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 8,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 9,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 10,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
        ],
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // onChange(current) {
      //   console.log("onChange:", current);
      //   this.current = current;
      // },
      clothChoice(item) {
        this.dialogModel.imgUrl = item.imgUrl;
        this.dialogModel.name = item.title;
        this.dialogModel.price = item.currentPrice;
        this.dialogVisible = true;
      },
      dialogSure() {
        this.dialogVisible = false;
        this.current = 1;
      },
    },
  };
</script>
<!-- <style>
.TypeView .top .middle .router-link-exact-active.router-link-active {
  border-bottom: 2px solid #000;
}
</style> -->
<style scoped>
  @import '../assets/common.css';
</style>
<style lang="less" scoped>
  .stepsDiv {
    background: url("../assets/bg04.png");
    padding-bottom: 50px;
    .ant-steps {
      padding-top: 120px;
      width: 60%;
      margin: 0 auto;
      min-width: 1000px;
      .ant-steps-item-finish {
        &/deep/ .ant-steps-item-icon {
          background-color: rgba(0, 0, 0, 0.1);
          border-color: #c8a985;
          i {
            color: #c8a985;
          }
        }
        &/deep/ .ant-steps-item-title {
          color: #fff;
          &::after {
            background-color: #c8a985;
          }
        }
        &/deep/ .ant-steps-item-description {
          color: rgba(255, 255, 255, 0.6);
        }
      }
      .ant-steps-item-process {
        &/deep/ .ant-steps-item-icon {
          background-color: #c8a985;
          border-color: #c8a985;
          i {
            color: #fff;
          }
        }
        &/deep/ .ant-steps-item-title {
          color: #c8a985;
          &::after {
            background-color: #fff;
          }
        }
        &/deep/ .ant-steps-item-description {
          color: rgba(255, 255, 255, 0.6);
        }
      }
      .ant-steps-item-wait {
        &/deep/ .ant-steps-item-icon {
          background-color: rgba(0, 0, 0, 0.1);
          border-color: rgba(255, 255, 255, 0.6);
          & .ant-steps-icon {
            color: rgba(255, 255, 255, 0.6);
          }
        }
        &/deep/ .ant-steps-item-title {
          color: rgba(255, 255, 255, 0.6);
          &::after {
            background-color: #fff;
          }
        }
        &/deep/ .ant-steps-item-description {
          color: rgba(255, 255, 255, 0.6);
        }
      }
      .ant-steps-item-container:hover {
        & /deep/ .ant-steps-item-icon {
          background-color: #c8a985;
          border-color: #c8a985;
          i {
            color: #fff;
          }
        }
        & /deep/ .ant-steps-item-title {
          color: #c8a985;
          &::after {
            background-color: #fff;
          }
        }
        & /deep/ .ant-steps-item-description {
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .el-steps {
      padding-top: 100px;
      width: 60%;
      margin: 0 auto;
      min-width: 1000px;
      & /deep/ .is-process {
        color: #c8a985;
        .is-text {
          border-color: #c8a985;
        }
        .el-step__icon {
          background-color: #c8a985;
          color: #fff;
        }
      }
      & /deep/ .is-wait {
        color: rgba(255, 255, 255, 0.4);
        .is-text {
          border-color: rgba(255, 255, 255, 0.4);
        }
        .el-step__icon {
          background-color: rgba(255, 255, 255, 0.4);
          color: #fff;
        }
      }
      & /deep/ .is-finish {
        color: #ffffff;
        .is-text {
          border-color: #c8a985;
        }
        & /deep/ .el-step__line {
          border-color: #c8a985;
        }
        .el-step__icon {
          background-color: #ffffff;
          color: #c8a985;
        }
      }
    }
  }
  .steps__wrapper {
    .title {
      font-size: 26px;
      font-weight: 600;
      color: #000000;
      line-height: 22px;
      margin-bottom: 20px;
      margin-top: 60px;
    }
    .right {
      width: 90%;
      padding-left: 20px;
      min-width: 1290px;
      box-sizing: border-box;

      .name {
        height: 22px;
        font-size: 22px;
        line-height: 22px;
        justify-content: space-between;
        align-items: center;
        color: #000;
        margin-bottom: 20px;
        .d-flex {
          align-items: center;
          .el-dropdown {
            margin-right: 20px;
            .el-dropdown-link {
              color: #000;
              cursor: pointer;
            }
          }
          .iconDiv {
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            span {
              margin-right: 5px;
            }
            .icon {
              flex-direction: column;
              align-items: center;
              justify-content: center;
              i {
                font-size: 7px;
              }
            }
          }
        }
      }
      .clothDiv {
        flex-wrap: wrap;
        align-items: center;
        .item {
          width: 308px;
          height: 562px;
          margin-bottom: 30px;
          margin-right: 10px;
          .imgDiv {
            position: relative;
            img {
              width: 308px;
              height: 462px;
            }
            &:hover .button {
              opacity: 1;
              color: #fff;
            }
            .button {
              position: absolute;
              opacity: 0;
              transition: all 0.3s linear;
              width: 152px;
              height: 51px;
              line-height: 51px;
              background: #000000;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              text-align: center;
            }
          }
          .clothTitle {
            width: 100%;
            height: 100px;
            .price {
              align-items: center;
              padding-left: 6px;
              .f_16 {
                margin-right: 10px;
              }
              .f_12 {
                text-decoration: line-through;
              }
            }
            & > .f_12 {
              font-weight: 600;
            }
          }
        }
      }
    }
  }

  .el-dialog__wrapper {
    &/deep/ .el-dialog {
      width: 816px !important;
      .dialogTitle {
        text-align: center;
        color: #1b1b1b;
        line-height: 36px;
      }
      .dialogDiv {
        flex-direction: column;
        align-items: center;
        padding: 30px 50px 10px 50px;
        .img {
          width: 200px;
          height: 200px;
          background: #d9d9d9;
        }
        .dialogName {
          margin-top: 20px;
          margin-bottom: 20px;
        }
      }
      .dialog-footer {
        justify-content: center;
        align-items: center;
        .dialogButton {
          width: 128px;
          height: 40px;
          text-align: center;
          line-height: 38px;
          transition: all 0.2s;
        }
        .default {
          border: 1px solid #1b1b1b;
          color: #1b1b1b;
          margin-right: 20px;

          &:hover {
            border-color: #fff;
            color: #fff;
            background-color: #1b1b1b;
          }
        }
        .primary {
          background: #1b1b1b;
          border: 2px solid #1b1b1b;
          color: #e5dfd9;
          &:hover {
            // border-color: #1b1b1b;
            // color: #1b1b1b;
            // background-color: #fff;
            opacity: 0.8;
          }
        }
      }
    }
  }
</style>
