<template>
  <div class="yygl_container recommened">
    <p class="now_page_title">
      消息与推送管理 / 推荐位管理 /
      <span>{{ look_flag ? "编辑" : "详情" }}</span>
    </p>
    <div class="select_box">
      <p class="box_title">
        <span></span>
        推荐位管理
      </p>
      <screen-type :data="filtdata" @getselect="getselect" @open_select="open_select"></screen-type>
      <div class="select_box_contain" :style="now_open?{height:'calc(100% - 280px)'}:''">
        <recommen-box
          @change_value="change_value"
          :data="item"
          v-for="(item, index) in select_able_arr"
          :key="index + 50000"
          class="select_box_in"
          :flag="look_flag"
          :isMap="$route.query.ad_type=='hgmap'"
        ></recommen-box>
      </div>
    </div>

    <div class="selected_box">
      <p class="box_title">
        <span></span>
        已选择列表
      </p>
      <div class="select_box_contain select_box_contain_selected">
        <recommen-box
          @rank_value="rank_value"
          :data="item"
          v-for="(item, index) in selected_arr"
          :key="index + 50000"
          class="select_box_in select_box_in_selected"
          :selected_flag="true"
          :flag="look_flag"
          :isMap="$route.query.ad_type=='hgmap'"
          :position="index==0?'start':index==selected_arr.length-1?'end':index"
        ></recommen-box>
        <div class="apaas_button btn_recommon" v-if="look_flag">
            <el-button>取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import screenType from "@/components/recommen/screen-type";
import recommenBox from "@/components/recommen/recommen-box";
export default {
  props: [],
  components: {
    screenType,
    recommenBox,
  },
  data() {
    return {
      filtdata: [],
      filter_name_arr: {
        organizations: "数据来源机构",
        serviceDomain: "数据领域",
        serviceTypeInfo: "数据服务类型",
      },
      select_able_arr: [],
      selected_arr: [],
      look_flag: false,
      now_open:false,
    };
  },
  watch: {},
  computed: {},
  created() {
    if (this.$route.query.look == 1) {
      this.look_flag = false;
    } else {
      this.look_flag = true;
    }
    this.get_select_data();
    this.get_select_list();
    this.get_selected_list();
  },
  mounted() {},
  methods: {
    open_select(val){
      this.now_open = val
    },
    onSubmit(){
        var temp_str = ''

        if (this.selected_arr.length!==4) {
          this.$message.error("推荐位数量只能为4个！");
          return;
        }

        this.selected_arr.forEach((e,idx) => {
            if(idx==this.selected_arr.length-1){
                temp_str = temp_str + e.id
            }else{
                temp_str = temp_str + e.id+','
            }
        });
        this.$http
        .post(`/apaas/service/v3/recommend/manage/featured/update`,{
            id:parseInt(this.$route.query.id),
            service_ids:temp_str
        })
        .then((response) => {
            if(response.data.success){
                this.$message.success('编辑成功')
                this.$router.push('/message/recommended')
            }else{
                this.$message.error(response.data.errMsg)
            }
        })
    },
    //改变select_able数据
    change_select_able(val,flag){
      for (let i = 0; i < this.select_able_arr.length; i++) {
        let item = this.select_able_arr[i];
        if (item.id===val.id) {
          this.$set(item, "checked", flag);
          break;
        }
      }
    },
    change_value(val) {
      // console.log(val);
      // debugger
      if(val.check){
          this.selected_arr.push(val.data)
      }else{
          var temp = ''
          this.selected_arr.forEach((e,index) => {
              if(e.id==val.id){
                  temp = index
              }
          });
          this.selected_arr.splice(temp,1)
      }
      this.change_select_able(val,val.check?1:0)
    },
    rank_value(val) {
      // console.log(val);
      // debugger
      var index = val.position=='start'?0:val.position=='end'?this.selected_arr.length-1:val.position
      if(val.act==2){
          this.change_select_able(val,0)
          this.selected_arr.splice(index,1)
      }else if(val.act==1){
          var temp = this.selected_arr.splice(index,1)
          this.selected_arr.splice(index+1, 0, temp[0])
      }else if(val.act==0){
          var temp = this.selected_arr.splice(index,1)
          this.selected_arr.splice(index-1, 0, temp[0])
      }
      
    },
    get_select_data() {
      console.log(this.$route.query);
      if(this.$route.query.ad_type == 'zhapp'){
        var temp = 21
        this.filter_name_arr = {
          organizations: "服务来源组织",
          serviceDomain: "服务领域",
          serviceTypeInfo: "服务类型",
        }
      }else if(this.$route.query.ad_type == 'hotdata'){
        var temp = 5
        this.filter_name_arr = {
          organizations: "数据来源机构",
          serviceDomain: "数据领域",
          serviceTypeInfo: "数据服务类型",
        }
      }else{
        var temp = 6
        this.filter_name_arr = {
          organizations: "服务来源组织",
          serviceDomain: "服务领域",
          serviceTypeInfo: "时空服务类型",
        }
      }
      this.$http
        .get(`/apaas/serviceapp/v3/servicemarket/profileInfo?serviceType=${temp}`)
        .then((response) => {
          this.filtdata = [];
          for (const key in response.data.data) {
            if (response.data.data[key].childDomains) {
              response.data.data[key].flag = false;
            }
            this.filtdata.push({
              name: this.filter_name_arr[key],
              arr: response.data.data[key],
              key: key,
            });
          }
        });
    },
    getselect(val) {
      // console.log(val);
      this.get_select_list(
        val.word,
        val.serviceTypeInfo.join(),
        val.serviceDomain.join(),
        val.organizations.join()
      );
    },
    get_select_list(word = "", data_type = "", sectors = "", org = "") {
      this.$http
        .get(
          `/apaas/service/v3/recommend/manage/featured/service/fliter?ad_type=${this.$route.query.ad_type}&keyword=${word}&data_type=${data_type}&sectors=${sectors}&org=${org}`
        )
        .then((response) => {
          if (response.data.success) {
            this.select_able_arr = response.data.data;
          }
        });
    },
    get_selected_list() {
      this.$http
        .get(`/apaas/service/v3/recommend/manage/featured/services/${this.$route.query.ad_type}`)
        .then((response) => {
          if (response.data.success) {
            if( response.data.data){
              this.selected_arr = response.data.data;
            }else{
              this.selected_arr = [];
            }
          }
        });
    },
  },
};
</script>

<style>
.recommened ::-webkit-scrollbar {
  width: 0px; /*对垂直流动条有效*/
  height: 0px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
.recommened ::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
.recommened ::-webkit-scrollbar-thumb {
  border-radius: 7px;
  background-color: #e8e8e8;
}

/*定义两端按钮的样式*/
.recommened ::-webkit-scrollbar-button {
  background-color: #fff;
}

/*定义右下角汇合处的样式*/
.recommened ::-webkit-scrollbar-corner {
  background: #fff;
}
</style>

<style scoped>
.yygl_container {
  overflow: hidden;
  background-color: #f6f7fb;
  padding: 20px;
  padding-top: 0px;
  height: calc(100vh - 58px);
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
  font-weight: 600;
}
.select_box {
  float: left;
  width: calc((100% - 20px)*0.771);
  height: calc(100% - 56px);
  overflow: hidden;
  margin-right: 20px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
}
.selected_box {
  float: left;
  width: calc((100% - 20px)*0.229);
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  height: calc(100% - 56px);
  overflow: hidden;
}
.box_title {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #e3e5ef;
  font-size: 16px;
  color: #58617a;
  font-weight: 600;
}
.box_title span {
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
  display: inline-block;
  vertical-align: -2px;
  margin-left: 30px;
  margin-right: 10px;
}
.select_box_contain {
  padding: 30px;
  width: 100%;
  height: calc(100% - 120px);
  overflow-x: hidden;
  overflow-y: scroll;
}
.select_box_contain_selected{
    height: calc(100% - 60px);
}
.select_box_in {
  width: calc((100% - 40px) / 3);
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
}
.select_box_in_selected{
    float: none;
}
.select_box_contain .select_box_in:nth-of-type(3n) {
  margin-right: 0px;
}
.selected_box .select_box_in {
  width: 100%;
  margin-right: 0;
}
.selected_box .select_box_contain {
  padding: 15px;
}
.btn_recommon {
  display: flex;
  justify-content: space-around;
  margin-bottom: 22px;
}
</style>
