<!-- 学习路径页面 -->
<template>
  <div class="learningPath">
    <!-- 搜索框及按钮 -->
    <div class="filter">
      <div class="filterItems">
        <div class="select">
          <a-select
            v-model:value="projectName"
            style="width: 270px"
            placeholder="请输入路径名称"
            :options="projectNameList"
            @change="selectProjectName"
            allowClear
            showSearch
          ></a-select>
        </div>

        <div class="select">
          <a-select
            v-model:value="projectName"
            style="width: 270px"
            placeholder="请选择状态"
            :options="projectNameList"
            @change="selectProjectName"
            allowClear
            showSearch
          ></a-select>
        </div>
        <div class="select">
          <!-- <a-date-picker
            v-model="selectTime"
            type="date"
            placeholder="时间"
            style="width: 270px"
          /> -->
          <a-range-picker
            v-model:value="value2"
            separator="至"
            :placeholder="['      开始时间', '        结束时间']"
          />
        </div>
      </div>
      <div class="btns">
        <div class="btn btn1">
          <div class="search"></div>
          <div class="btnText">搜索</div>
        </div>
        <div class="btn btn2">
          <div class="search"></div>
          <div class="btnText">重置</div>
        </div>
        <!-- <router-link to="/projectadd">
          <div class="btn btn3">
            <div class="search"></div>
            <div class="btnText">创建路径</div>
          </div>
        </router-link> -->
        <div class="btn btn3" @click="handleOut">
          <div class="search"></div>
          <div class="btnText">创建路径</div>
        </div>
      </div>
    </div>
    <!-- 搜索框及按钮 -->
    <!-- 表格 -->
    <div class="tableBox" style="padding-bottom: 160px; position: relative">
      <a-table
        style="border: 1px solid #f2f6fe"
        :columns="tableDataFunc()"
        :data-source="tableData"
        :loading="tableDataTotal === -1 ? true : false"
        expandRowByClick="true"
        :scroll="{ x: 1600 }"
        @expand="expandTable"
        :pagination="false"
      />
      <div class="pa">
        <a-pagination
          showSizeChanger="true"
          showQuickJumper="true"
          hideOnSinglePage="true"
          :pageSize="pageSize"
          :current="currentPage"
          :total="tableDataTotal"
          class="pagination"
        />
      </div>
    </div>

    <!-- 表格 -->

    <a-modal v-model:visible="out" footer="null" style="margin-top: 400px">
      <div class="out">
        <div class="top">
          <img class="topimg" src="../../assets/images/courseManage/add1.png" />
          <div class="topc">创建路径</div>
          <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
            <img
              style="width: 20px; height: 20px"
              src="../../assets/images/basicinfo/close.png"
            />
          </div>
        </div>
        <div class="mid clearfix">
          <div class="name">
            <div class="d" style="margin-top: -4px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">路径图名称</div>
            <div class="in">
              <a-input
                v-model:value="valueE"
                maxlength="20"
                style="border-radius: 4px"
              />
              <div class="showcount">{{ valueE.length }}/20</div>
            </div>
          </div>
          <div class="bac">
            <div class="d" style="margin-top: 12px">
              <img
                style="width: 10px; height: 10px"
                src="../../assets/images/basicinfo/asterisk.png"
              />
            </div>
            <div class="inname">路径图背景</div>
            <div class="in">
              <!-- <img class="im" src="../../assets/px.jpg" />
            <img class="im" src="../../assets/px.jpg" />
            <img class="im" src="../../assets/px.jpg" /> -->
              <div
                @click="chooseImg(item.id)"
                v-for="item in imgData"
                :key="item.key"
                style="
                  border-radius: 8px;
                  width: 136px;
                  height: 106px;
                  background-size: 100%;
                  background-repeat: no-repeat;
                "
                :style="{
                  border:
                    learnPathBg === item.id
                      ? '2px solid rgba(78, 166, 255, 1)'
                      : '2px solid rgba(78, 166, 255, 0)',
                  'background-image': 'url(' + item.source + ')',
                }"
              >
                <!-- <img class="im" :src="item.source" /> -->
              </div>
            </div>
          </div>
          <div class="info">
            <div class="inname">路径说明</div>
            <div class="in">
              <a-textarea v-model:value="valuei" maxlength="150" />
              <div class="showcount">{{ valuei.length }}/150</div>
            </div>
          </div>
          <div class="btn">
            <button class="samtn btn1" @click="handleOut">取消</button>
            <button class="samtn btn2" @click="handleOut">确定</button>
          </div>
        </div>
      </div></a-modal
    >
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from "vue";

export default {
  name: "learningPath",
  setup() {
    const state = reactive({
      projectNameList: [
        {
          id: 1,
          value: "项目一",
          label: "项目一",
        },
        {
          id: 2,
          value: "项目二",
          label: "项目二",
        },
        {
          id: 3,
          value: "项目三",
          label: "项目三",
        },
        {
          id: 4,
          value: "项目四",
          label: "项目四",
        },
      ],
      out: false,
      number: null,
      selectTime: null,
      tableData: [
        {
          key: 1,
          number: 1,
          manager: "产品经理上升路径",
          state: "已发布",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: false,
        },
        {
          key: 2,
          number: 2,
          manager: "程序员升级路径",
          state: "草稿",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: true,
        },
        {
          key: 3,
          number: 3,
          manager: "ui成长之路",
          state: "已停用",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: false,
        },
        {
          key: 4,
          number: 4,
          manager: "ui成长之路",
          state: "草稿",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: true,
        },
        {
          key: 4,
          number: 4,
          manager: "ui成长之路",
          state: "草稿",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: true,
        },
        {
          key: 4,
          number: 4,
          manager: "ui成长之路",
          state: "草稿",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: true,
        },
        {
          key: 4,
          number: 4,
          manager: "ui成长之路",
          state: "草稿",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: true,
        },
        {
          key: 4,
          number: 4,
          manager: "ui成长之路",
          state: "草稿",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: true,
        },
        {
          key: 4,
          number: 4,
          manager: "ui成长之路",
          state: "草稿",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: true,
        },
        {
          key: 4,
          number: 4,
          manager: "ui成长之路",
          state: "草稿",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: true,
        },
        {
          key: 4,
          number: 4,
          manager: "ui成长之路",
          state: "草稿",
          creater: "管理员",
          pubtime: "2022-07-20 14:00:03",
          cretime: "2022-07-20 14:00:03",
          haspub: true,
        },
      ],
      imgData: [
        {
          id: 1,
          source: require("../../assets/images/leveladd/1.png"),
        },
        {
          id: 2,
          source: require("../../assets/images/leveladd/2.png"),
        },
        {
          id: 3,
          source: require("../../assets/images/leveladd/3.png"),
        },
      ],
      learnPathBg: null, //选择的路径图背景
      currentPage: 1,
      tableDataTotal: 100,
      pageSize: 10,
      value1: "",
      value2: ref(),
      valueE: "",
      valueEE: "",
      valuei: "",
    });
    const tableDataFunc = () => {
      const columns = [
        {
          title: "序号",
          dataIndex: "number",
          key: "number",
          width: 100,
          align: "center",
          className: "h",
          // ellipsis: true,
          // scopedSlots: { customRender: "action" }, //引入的插槽
          // customRender: (text, record) => {
          //   console.log(text, record);
          //   return <span>{text.text}</span>;
          // },
        },
        {
          title: "路径图名称",
          dataIndex: "manager",
          key: "manager",
          width: 100,
          align: "center",
          ellipsis: true,
          className: "h",
        },
        {
          title: "状态",
          dataIndex: "state",
          // width: "30%",
          key: "state",
          width: 100,
          align: "center",
          className: "h",
        },
        {
          title: "创建人",
          dataIndex: "creater",
          // width: "30%",
          key: "creater",
          width: 100,
          align: "center",
          className: "h",
        },
        {
          title: "发布时间",
          dataIndex: "pubtime",
          key: "pubtime",
          width: 180,
          align: "center",
          className: "h",
        },
        {
          title: "创建时间",
          dataIndex: "cretime",
          key: "cretime",
          width: 180,
          align: "center",
          className: "h",
        },
        {
          title: "操作",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          width: 200,
          align: "center",
          // scopedSlots: { customRender: "action" }, //引入的插槽
          // customRender: (text) => {
          //   console.log(text);
          //   return (
          //     <div class="opa">
          //       <div class="opacation">
          //         <span class={text.record.haspub ? "activecls" : "errorCls"}>
          //           发布
          //         </span>
          //         <span style={{ "margin-left": "25px" }}>编辑</span>
          //         <router-link to="/leveladd">
          //           <span style={{ "margin-left": "25px" }}>关卡</span>
          //         </router-link>

          //         <div style={{ "margin-left": "25px" }} class="more">
          //           <span>授权</span>
          //           <div class="moreArrow"></div>
          //           <div class="moreItems"></div>
          //         </div>

          //         <div
          //           style={{ "margin-left": "21px", "margin-right": "30px" }}
          //           class="more"
          //         >
          //           <span>更多</span>
          //           <div class="moreArrow"></div>
          //           <div class="moreItems"></div>
          //         </div>
          //       </div>
          //     </div>
          //   );
          // },
        },
      ];
      return columns;
    };
    onMounted(() => {
      // console.log("执行");
    });
    const selectProjectName = (value, index) => {
      console.log("value", value, index);
    };
    const expandTable = (e, a) => {
      // console.log("惦记了");
      console.log("e", e, a);
    };
    const handleOut = () => {
      state.out = !state.out;
    };
    const chooseImg = (id) => {
      console.log(id);
      state.learnPathBg = id;
    };
    const getTableDate = () => {
      let data = state.tableData;
      data.map((value) => {
        {
          //单层项目
          value.opacation = (
            <div class="operation">
              <div class="nSelect">
                {value.state === "草稿" ? (
                  <div class="fb">
                    <div class="jc">发布</div>
                    <div class="jc">编辑</div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.state === "已发布" ? (
                  <div class="fb">
                    <div class="jc">编辑</div>
                  </div>
                ) : (
                  <div></div>
                )}
                {value.state === "已停用" ? (
                  <div class="fb">
                    <div class="jc">复制</div>
                  </div>
                ) : (
                  <div></div>
                )}
              </div>
              <div class="tableSelect">
                <router-link to="/leveladd">
                  <div class="g1">关卡</div>
                </router-link>

                <a-select
                  style="width: 50px;margin-top:2px;margin-left:25px"
                  value="授权"
                  // options={state.projectNameList}
                  dropdownClassName="tabledropdown"
                >
                  <a-select-option value="权限名单" label="权限名单">
                    <div>权限名单</div>
                  </a-select-option>
                  <a-select-option value="归属权" label="归属权">
                    <div
                      onClick={() => {
                        console.log("点击了");
                      }}
                    >
                      归属权
                    </div>
                  </a-select-option>
                  <a-select-option value="查看权" label="查看权">
                    <div>查看权</div>
                  </a-select-option>
                  <a-select-option value="管理权" label="管理权">
                    <div>管理权</div>
                  </a-select-option>
                </a-select>
                <a-select
                  style="width: 50px;margin-top:2px;margin-left:25px"
                  value="更多"
                  // options={state.projectNameList}
                  dropdownClassName="tabledropdown"
                >
                  <a-select-option
                    value="复制"
                    label="复制"
                    style="padding-left:35px"
                  >
                    <div>复制</div>
                  </a-select-option>
                  <a-select-option
                    value="取消"
                    label="取消"
                    style="padding-left:35px"
                  >
                    <div
                      onClick={() => {
                        console.log("点击了");
                      }}
                    >
                      取消
                    </div>
                  </a-select-option>
                </a-select>
              </div>
            </div>
          );
        }
      });
      state.tableData = data;
    };
    getTableDate();
    return {
      ...toRefs(state),
      selectProjectName,
      expandTable,
      handleOut,
      tableDataFunc,
      chooseImg,
    };
  },
};
</script>
<style lang="scss">
.out {
  display: block;
  position: absolute;
  top: 90px;
  width: 680px;
  // height: 525px;
  background-color: #fff;

  box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .top {
    width: 100%;
    height: 68px;

    background: linear-gradient(
      rgba(78, 166, 255, 0.2) 0%,
      rgba(78, 166, 255, 0) 100%
    );
    display: flex;
    align-items: center;
    .topimg {
      width: 18px;
      height: 18px;
      margin-left: 27px;
      margin-top: -2px;
    }
    .topc {
      color: #000000;
      font-size: 16px;
      margin-left: 8px;
    }
  }
  .mid {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .d {
      // margin-top: 8px;
      // color: #ff4e4e;
      margin-left: -5px;
    }
    .name {
      width: 78%;
      // background-color: lightcoral;
      display: flex;
      margin-top: 20px;
      align-items: center;
      height: 40px;
      // border: 1px solid black;

      .inname {
        color: #6f6f6f;
        font-size: 14px;
        margin-left: 7px;
      }
      .in {
        margin-left: 14px;
        width: 81%;
        position: relative;
        .ant-input {
          border-radius: 5px;
          // height: 120%;
          width: 100%;
          height: 40px;
        }
        .showcount {
          position: absolute;
          right: 10px;
          color: #c7cbd2;
          bottom: 5px;
        }
      }
    }
    .bac {
      width: 78%;
      // background-color: lightcoral;
      display: flex;
      margin-top: 30px;
      // border: 1px solid black;
      .d {
        margin-top: 18px;
        color: #ff4e4e;
      }
      .inname {
        color: #6f6f6f;
        font-size: 14px;
        margin-left: 7px;
        margin-top: 15px;
      }
      .in {
        margin-left: 14px;
        width: 81%;
        height: 110px;
        // background-color: red;
        display: flex;
        justify-content: space-between;
        .im {
          border-radius: 8px;
          width: 140px;
          height: 110px;
          cursor: pointer;
        }
      }
    }
    .info {
      width: 78%;
      // background-color: lightcoral;
      display: flex;
      margin-top: 30px;
      // align-items: center;
      // height: 40px;
      // border: 1px solid black;

      .inname {
        color: #6f6f6f;
        font-size: 14px;
        margin-left: 26px;
        margin-top: 15px;
      }
      .in {
        margin-left: 14px;
        width: 81%;
        position: relative;
        .ant-input {
          border-radius: 5px;
          // height: 120%;
          width: 100%;
          height: 130px;
          resize: none;
        }
        .showcount {
          position: absolute;
          right: 10px;
          color: #c7cbd2;
          bottom: 5px;
        }
      }
    }
    .btn {
      width: 33%;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      .samtn {
        width: 100px;
        height: 40px;
        font-size: 14px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        cursor: pointer;
      }
      .btn1 {
        background-color: #fff;
        color: #4ea6ff;
      }
      .btn2 {
        background-color: #4ea6ff;
        color: #fff;
      }
    }
  }
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}
.learningPath {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  // position: relative;
  .filter {
    margin-left: 38px;
    margin-right: 38px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .filterItems {
      display: flex;
      flex-wrap: wrap;
      .select {
        margin-right: 20px;
        margin-bottom: 20px;
      }
    }
    .btns {
      display: flex;
      // flex-wrap: wrap;
      .btn {
        padding: 0px 26px 0px 26px;
        height: 38px;
        background: rgba(64, 158, 255, 0);
        border-radius: 8px;
        border: 1px solid rgba(64, 158, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;
        .search {
          background-size: 100%;
        }
        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: rgba(64, 158, 255, 1);
          line-height: 36px;
          margin-left: 5px;
        }
      }
      .btn1 {
        .search {
          width: 15px;
          height: 17px;
          background-image: url("../../assets/images/courseManage/search1.png");
        }
      }
      .btn2 {
        .search {
          width: 16px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/reset1.png");
        }
      }
      .btn3 {
        margin-right: 0px;
        .search {
          width: 17px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/add1.png");
        }
      }
      .btn1:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/search0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn2:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/reset0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
      .btn3:hover {
        background: rgba(64, 158, 255, 1);
        .search {
          background-image: url("../../assets/images/courseManage/add0.png");
        }
        .btnText {
          color: #ffffff;
        }
      }
    }
  }
  .tableBox {
    margin: 20px 38px 30px;

    th.h {
      background-color: #eff4fc !important;
    }

    .ant-table-tbody
      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
      > td {
      background: #f6f9fd;
    }
    .pa {
      left: 0;
      width: 100%;
      // height: 20px;
      // background-color: red;
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 20px;
    }
  }
  .operation {
    display: flex;
    justify-content: right;
    .nSelect {
      .fb {
        display: flex;
        .jc {
          color: #4ea6ff;
          font-size: 14px;
          margin-left: 20px;
        }
      }
    }
    .tableSelect {
      margin-right: 20px;
      display: flex;
      align-items: center;
      justify-content: right;
      .g1 {
        color: #4ea6ff;
        font-size: 14px;
      }
    }
  }
  // .operation {
  //   font-size: 14px;
  //   font-weight: 400;
  //   color: #4ea6ff;
  //   // line-height: 36px;
  //   .operation1 {
  //     margin-left: 21px;
  //     width: 28px;
  //     display: inline-block;
  //   }
  //   .operation3 {
  //     margin-left: 21px;
  //     width: 70px;
  //     display: inline-block;
  //     text-align: center;
  //   }
  //   .more {
  //     width: 50px;
  //     display: inline-block;
  //     margin-left: 21px;
  //     position: relative;
  //     text-align: left;
  //     // z-index: 99999;
  //     .moreArrow {
  //       width: 13px;
  //       height: 7px;
  //       display: inline-block;
  //       background-image: url("../../assets/images/navtop/down.png");
  //       background-size: 100%;
  //       margin: 2px;
  //       margin-left: 7px;
  //     }
  //     .moreItems {
  //       width: 80px;
  //       padding: 5px;
  //       display: none;
  //       background: #ffffff;
  //       box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
  //       border-radius: 3px;
  //       border: 0px solid #dcdcdc;
  //       position: absolute;
  //       left: 0px;
  //       top: 28px;
  //       z-index: 100;
  //       text-align: center;
  //     }
  //   }
  //   .more:hover .moreArrow {
  //     background-image: url("../../assets/images/navtop/up.png");
  //   }
  //   .more:hover .moreItems {
  //     display: block;
  //   }
  // }

  .unout {
    display: none;
  }

  .opa {
    display: flex;
    justify-content: right;
    .opacation {
      font-size: 14px;
      font-weight: 400;
      color: #4ea6ff;
      display: flex;
      // line-height: 36px;
      .activecls {
        display: inline-block;
      }
      .errorCls {
        display: none;
      }
      .more {
        position: relative;
        height: 100%;
        .moreArrow {
          width: 13px;
          height: 7px;
          display: inline-block;
          background-image: url("../../assets/images/navtop/down.png");
          background-size: 100%;
          margin: 2px;
          margin-left: 7px;
        }
        .moreItems {
          width: 80px;
          height: 70px;
          display: none;
          background: #ffffff;
          box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
          border-radius: 3px;
          border: 0px solid #dcdcdc;
          position: absolute;
          left: 0px;
          top: 30px;
          z-index: 999;
        }
      }
      .more:hover .moreArrow {
        background-image: url("../../assets/images/navtop/up.png");
      }
      .more:hover .moreItems {
        display: block;
      }
    }
  }
}
</style>
