<!-- banner管理 -->
<template>
  <div class="detail_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <div class="content_top bg-scroll">
        <type-form ref="typeFormRef" @action="submitFormData" @changeType="changeType"></type-form>
        <div class="ability_select">
          <div class="title">
            <span>已选择能力（0/9）</span>
            <el-tooltip
              class="box-item"
              effect="light"
              content="最少需选择6个能力"
              placement="top"
              >
              <bg-icon icon="#bg-ic-circle-warning" style="color: #7784a6;"></bg-icon>
            </el-tooltip>
          </div>
          <div class="select_arr">
            <!-- <div v-for="(item,i) in selectArr" :key="'select' +i">
              
            </div> -->
            <ability-list :list="selectArr" :flag="true" @openBox="openDialog" @deleteItem="deleteItem" @move="move"></ability-list>
            <!-- <div v-for="(e,i) in (9 - selectArr.length)" :key="'empty' +i" class="empty_card" @click="openDialog">
              <span>+</span>
            </div> -->
          </div>
        </div>
        <div class="state_box">
          <span>是否启用</span>
          <bg-switch :labels="['否','是']" :values="[0,1]" v-model="formData.state"></bg-switch>
        </div>
      </div>
      <div class="content_bottom">
        <div>
          <el-button  @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      custom-class="select_dialog"
      title="选择能力"
      v-model="selectDialog"
      width="1220px"
      :before-close="
        () => {
          selectDialog = false;
        }
      "
    >
      <div class="select_box">
        <div class="topFilter">
          <div class="right">
            <el-select
              v-model="dialogFilter.openness"
              placeholder="请选择开放程度"
              style="width: 240px"
              multiple
              collapse-tags
            >
              <el-option
                v-for="(item, index) in typeList"
                :key="'typeList' + index"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-cascader
              v-model="dialogFilter.organization_id"
              :options="orgList"
              placeholder="请选择组织"
              :props="{ expandTrigger: 'hover', label: 'name', value: 'id', multiple: true, emitPath: false, checkStrictly: true, children: 'Child'}"
              :clearable="true"
              collapse-tags
              style="width: 240px"
            >
              <template #default="{ data }">
                <span>{{ data.name }}</span>
              </template>
            </el-cascader>
            <el-input
              v-model.trim="dialogFilter.search"
              placeholder="请输入内容"
              style="width: 240px"
              :prefix-icon="Search"
            />
            <el-button type="primary" @click="searchAction">查询</el-button>
            <el-button type="default" @click="clearAction">重置</el-button>
          </div>
        </div>
        <div class="table_box">
          <div class="collation">
            <div>
              <span class="collation-text" :class="{'current':dialogFilter.collation==item.value}" v-for="(item,index) in collationArr" :key="'collationArr' + index" @click="changeCollation(item.value)">{{item.name}}</span>
            </div>
            <div>
              <span>已选择</span>
              <span class="num">（{{selection.length}}/9）</span>
              <span>项</span>
              <span class="can_click_text" @click="clearSelection">清空</span>
            </div>
          </div>
          <div class="user_table bg-scroll">
            <ability-list :list="list" @changeCheck="changeCheck"></ability-list>
          </div>
          
        </div>
      </div>
      <template v-slot:footer>
        <bg-pagination
          :page="dialogFilter.page"
          :size="dialogFilter.limit"
          :total="total"
          @change-page="changePage"
          @change-size="changeSize"
          :pageSizes="[15,30,50]"
        >
        </bg-pagination>
        <div class="apaas_button">
          <el-button type="default" @click="selectDialog = false">取 消</el-button>
          <el-button type="primary" @click="conform">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
import axios from '../../../../../request/http.js'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import typeForm from "./type-form.vue"
import abilityList from "@/components/ability-list.vue"
const router = useRouter()
const route = useRoute()
const typeFormRef = ref(null);
const state = reactive({
  formData: {
    type: "",
    icon: [],
    state: 1
  },
  emptyArr: ["","","","","","","","",""],
  selectArr: ["","","","","","","","",""],
  selectDialog: false,
  dialogFilter: {
    openness: "",
    organization_id: "",
    search: "",
    limit: 15,
    page: 1,
    collation: 0,
  },
  orgList: [],
  typeList: [
    // {
    //   name: "全部",
    //   value: ""
    // },
    {
      name: "共享",
      value: 1
    },
    {
      name: "开放",
      value: 2
    }
  ],
  total: 40,
  collationArr: [
    {
      name:'综合排序',
      value:0,
    },
    {
      name:'最新更新',
      value:1,
    },
    {
      name:'最高人气',
      value:2,
    },
    {
      name:'最好评价',
      value:3,
    },
  ],
  selection: [],
  list: [
    {
      ability_logo: "",
      ability_name: "冒烟测试1冒烟测试冒烟测试12101",
      ability_type: 0,
      browse_count: 118,
      call_count: 666,
      develop: "比格",
      develop_id: "0e9f31d8-117c-4be4-bdfb-9af1bddd852e",
      id: 1,
      include_mock_service: true,
      openness: "开放",
      openness_id: "9de06ba6-6ee2-4449-91d9-31a1c7554311",
      score: 1.9,
      sort_weight: 228.2733180765668,
      synopsis: "冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101",
    },
    {
      ability_logo: "",
      ability_name: "冒烟测试112101",
      ability_type: 0,
      browse_count: 118,
      call_count: 666,
      develop: "比格",
      develop_id: "0e9f31d8-117c-4be4-bdfb-9af1bddd852e",
      id: 2,
      include_mock_service: true,
      openness: "开放",
      openness_id: "9de06ba6-6ee2-4449-91d9-31a1c7554311",
      score: 1.9,
      sort_weight: 228.2733180765668,
      synopsis: "冒烟测试112101",
    },
    {
      ability_logo: "",
      ability_name: "测试1121s01",
      ability_type: 0,
      browse_count: 118,
      call_count: 666,
      develop: "比格",
      develop_id: "0e9f31d8-117c-4be4-bdfb-9af1bddd852e",
      id: 3,
      include_mock_service: true,
      openness: "开放",
      openness_id: "9de06ba6-6ee2-4449-91d9-31a1c7554311",
      score: 1.9,
      sort_weight: 228.2733180765668,
      synopsis: "冒烟测试112101",
    },
    {
      ability_logo: "",
      ability_name: "冒烟测试1冒烟测试冒烟测试12101",
      ability_type: 0,
      browse_count: 118,
      call_count: 666,
      develop: "比格",
      develop_id: "0e9f31d8-117c-4be4-bdfb-9af1bddd852e",
      id: 4,
      include_mock_service: true,
      openness: "开放",
      openness_id: "9de06ba6-6ee2-4449-91d9-31a1c7554311",
      score: 1.9,
      sort_weight: 228.2733180765668,
      synopsis: "冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101冒烟测试112101",
    },
  ],
  selectArrNew: []
})

const getDetail = (id) => {
  // axios
  //   .get(`/apaas/system/v5/banner/${id}`)
  //   .then(res => {
  //     if (res.data.code == 200) {
  //       const data = res.data.data
  //       typeFormRef.value.setForm({
  //         type: data.banner_name,
  //         icon: data.banner_image ? [{url: data.banner_image}] : [],
  //       })
  //       state.formData.state = data.state
  //     }else {
  //       ElMessage.error(res.data.data)
  //     }
  //   })
  //   .catch(err => {
  //     console.log(err)
  //   })
}

const getOrgList = () => {
  axios
    .get(`/apaas/system/v5/org/tree`)
    .then((res) => {
      if (res.data.code == 200) {
        console.log(res.data.data)
        state.orgList = res.data.data || []
      }else {
        ElMessage.error(res.data.data)
      }
    })
} // 获取组织列表

const changeType = (val) => {
  state.formData.type = val
}
const getAbilityList = () => {
  let params = {
    ...state.dialogFilter,
    type: state.formData.type
  }
  console.log(params)
}

const openDialog = () => {
  console.log(123123123)
  state.selectDialog = true
  getAbilityList()
}

const deleteItem = (item) => {
  console.log(item)
  changeCheck(item,true)
}

const move = (temp) => {
  let id = temp.item.id
  let index = null
  state.selectArr.forEach((e,i) => {
    if (e.id == id) {
      index = i
    }
  })
  if (temp.type == 1) {
    state.selectArr[index] = state.selectArr[index+1]
    state.selectArr[index+1] = temp.item
  }else {
    state.selectArr[index] = state.selectArr[index-1]
    state.selectArr[index-1] = temp.item
  }
}
const changePage = (val) => {
  state.dialogFilter.page = 1
  getAbilityList()
}

const changeSize = (val) => {
  state.dialogFilter.limit = val
  changePage(1)
}

const changeCollation = (val) => {
  state.dialogFilter.collation = val
}

const clearSelection = () => {
  state.selection = []
}
const searchAction = () => {
  console.log(state.dialogFilter)
}

const clearAction = () => {
  state.dialogFilter = {
    openness: "",
    organization_id: "",
    search: "",
    collation: 0,
  }
  changePage(1)
}

const changeCheck = (item,deleteFlag) => {
  let arr = state.selectArr.map(e => e.id) || []
  if (arr.indexOf(item.id) > -1) {
    state.selectArrNew.splice(arr.indexOf(item.id),1)
  }else {
    state.selectArrNew.push(item)
  }
  state.selectArrNew.forEach((e,i) => {
    e.canDown = true
    e.canUp = true
    if (i == 0) {
      e.canUp = false
    }
    if (i == state.selectArrNew.length - 1) {
      e.canDown = false
    }
  })
  if (deleteFlag) {
    conform()
  }
}
const submit = () => {
  typeFormRef.value.submitForm()
}

const conform = () => {
  state.selectArr = JSON.parse(JSON.stringify(state.selectArrNew))
  console.log(state.selectArr)
  if (state.selectArr.length < 9) {
    let arr = []
    for (var i = 0; i < 9-state.selectArr.length; i++ ) {
      arr.push("")
    }
    state.selectArr.push(...arr)
    console.log(state.selectArr)
  }
  state.selectDialog = false
}

const submitFormData = (data) => {
  if (data) {
    Object.assign(state.formData,data);
    console.log(state.formData)
    if (route.query.id) {
      // 编辑
      let params = {
        ...state.formData,
        id: +route.query.id
      }
      params.icon = params.icon && params.icon.length > 0 ? params.icon[0].url : ''
      // axios
      //   .put(`/apaas/system/v5/banner`,params)
      //   .then(res => {
      //     if (res.data.code == 200) {
      //       ElMessage.success(res.data.msg)
      //       router.go(-1)
      //     }else {
      //       ElMessage.error(res.data.data)
      //     }
      //   })
    }else {
      let params = {
        ...state.formData,
      }
      params.icon = params.icon && params.icon.length > 0 ? params.icon[0].url : ''
      // axios
      //   .post(`/apaas/system/v5/banner`,params)
      //   .then(res => {
      //     if (res.data.code == 200) {
      //       ElMessage.success(res.data.msg)
      //       router.go(-1)
      //     }else {
      //       ElMessage.error(res.data.data)
      //     }
      //   })
    }
  }
}

const cancel = () => {
  router.go(-1)
}

onBeforeMount(() => {
  getOrgList()
  if (route.query.id) {
    getDetail(route.query.id)
  }
})
    
const {
  formData,
  selectArr,
  emptyArr,
  selectDialog,
  dialogFilter,
  typeList,
  total,
  orgList,
  collationArr,
  selection,
  list,
} = toRefs(state)

</script>

<style lang="scss" scoped>
.detail_container {
  width: 100%;
  padding: 0 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .main_container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
    border-radius: 6px;
    margin: 0 0 16px;
    position: relative;
    height: calc(100% - 62px);
    // padding: 24px;
    .content_top {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
      padding: 30px 40px 20px;
      .ability_select {
        .title {
          font-size: 14px;
          color: #202531;
          margin-bottom: 6px;
          &::before {
            content: "*";
            color: var(--el-color-danger);
            margin-right: 4px;
          }
        }
        .select_arr {
          width: 1200px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .empty_card {
            cursor: pointer;
            width: 384px;
            height: 242px;
            border: 1px dashed #dadee7;
            border-radius: 4px;
            margin-bottom: 24px;
            color: #dadee7;
            text-align: center;
            line-height: 242px;
            font-size: 48px;
            font-weight: 100;
          }
        }
      }
      .state_box {
        font-size: 14px;
        span {
          margin-right: 16px;
        }
      }
    }
    .content_bottom {
      height: 68px;
      line-height: 68px;
      text-align: right;
      padding: 0 20px;
      border-top: 1px solid #e6e9ef;
      .el-button {
        width: 92px;
      }
    }
  }
  .select_dialog {
    .select_box {
      width: 100%;
      height: 680px;
      .topFilter {
        height: 68px;
        padding: 16px;
        border-bottom: 1px solid #e6e9ef;
        display: flex;
        font-size: 14px;
        align-items: center;
        flex-direction: row-reverse;
        // .left {
        //   width: 240px;
        //   padding-left: 15px;
        //   color: #404a62;
        //   .num {
        //     color: #202531;
        //     font-weight: 700;
        //     margin: 0 3px;
        //   }
        // }
        .right {
          width: 912px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .el-button {
            margin: 0;
            width: 64px;
          }
        }
      }
      .table_box {
        padding: 10px 0;
        height: calc(100% - 68px);
        background-color: #f8f9fb;
        .collation{
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 6px 16px 16px;
          font-size: 14px;
          color: #202531;

          .collation-text{
            font-size: 14px;
            color: #404a62;
            margin-right: 32px;
            position: relative;
            cursor: pointer;
          
            &::after{
              content: '';
              display: block;
              position: absolute;
              top: 2px;
              right: -16px;
              width: 1px;
              cursor:auto;
              height: 16px;
	            background-color: #cbced7;
            }
          
            &:nth-last-of-type(1)::after{
              display: none;
            }
          }
          .current{
            color:#3759be!important;
          }
          .can_click_text {
            margin-left: 24px;
          }
        }
        .user_table {
          max-height: calc(100% - 31px);
          padding: 0 16px;
          :deep().bg-table {
            .el-scrollbar {
              --el-scrollbar-bg-color: #fff
            }
            .el-table__empty-block {
              
              .empty_container {
                height: calc(100% - 45px);
              }
            } 
          }
        }
      }
    }
    .bg-pagination {
      float: left;
      margin-top: 0;
    }
  }
}
</style>
<style>
.select_dialog {
  margin-top: 80px;
}
.el-dialog .el-dialog__body {
  padding: 0;
}
.el-dialog .el-dialog__footer {
  padding: 16px;
}
</style>