<template>
  <div class="apply_container">
    <info-list :list_arr="module_arr">
      <apply-form ref="apply_info" slot="apply_info"></apply-form>
      <service-list ref="apply_service" slot="apply_service" :service_arr="service_arr"></service-list>
    </info-list>

    <div class="footout">
      <span>共{{service_arr.length}}项服务</span>
      <span class="applybtn" @click="sub_service()">提交申请</span>
    </div>
  </div>
</template>

<script>
import infoList from "@/components/infoList";
import applyForm from "@/components/shop-car-apply/apply_form";
import serviceList from "@/components/shop-car-apply/service_list";
export default {
  props: {},
  components: {
    infoList,
    applyForm,
    serviceList
  },
  data() {
    return {
      module_arr: [
        {
          title: "服务申请",
          type: "solt",
          solt_name: "apply_info"
        },
        {
          title: "申请的服务",
          type: "solt",
          solt_name: "apply_service"
        }
      ],
      post_arr: [],
      service_arr: [
        // {
        //     img:'http://b-ssl.duitang.com/uploads/item/201705/09/20170509165713_NiHaG.jpeg',
        //     title:'水路货物周转量情况水路货物周转量情况',
        //     tips:[
        //         {
        //             tip:'Map Service',
        //             type:'nor'
        //         },
        //         {
        //             tip:'共享',
        //             type:'share'
        //         },
        //     ],
        //     type:'基础数据服务',
        //     auth:'贵州省交通运输厅',
        //     size:'规格：访问次数：20/日，访问量：100/日',
        //     applytype:'申请方式：按月',
        //     num:1,
        //     isMg:false,
        //     tableurl:'applydata',
        // },
        // {
        //     img:'http://b-ssl.duitang.com/uploads/item/201705/09/20170509165713_NiHaG.jpeg',
        //     title:'水路货物周转量情况水路货物周转量情况',
        //     tips:[
        //         {
        //             tip:'Map Service',
        //             type:'nor'
        //         },
        //         {
        //             tip:'敏感',
        //             type:'mg'
        //         },
        //     ],
        //     type:'基础数据服务',
        //     auth:'贵州省交通运输厅',
        //     size:'规格：访问次数：20/日，访问量：100/日',
        //     applytype:'申请方式：按月',
        //     num:1,
        //     isMg:true,
        //     tableurl:'applydata',
        // },
      ],
      share_arr: [
        "",
        {
          name: "共享",
          val: "share"
        },
        {
          name: "受限",
          val: "limit"
        },
        {
          name: "敏感",
          val: "mg"
        }
      ],
      temp_sub_arr: []
    };
  },
  watch: {},
  computed: {},
  created() {
    if (this.$route.query.service_id) {
      this.get_one_service(this.$route.query);
    } else if (this.$route.query.app_id) {
      this.get_one_app(this.$route.query);
    } else {
      console.log(JSON.parse(window.sessionStorage.getItem("shoppingCart")));
      var temp_arr = [];
      JSON.parse(window.sessionStorage.getItem("shoppingCart")).forEach(e => {
        temp_arr.push(e.id);
      });
      this.get_car_list(temp_arr);
    }
  },
  mounted() {},
  methods: {
    get_one_app(app_data) {
      this.$http
        .get(`/apaas/serviceapp/v3/shopcart/appinfo?app_id=${app_data.app_id}`)
        .then(response => {
          console.log(response);
          let data = response.data.data;
          if (response.data.success && data) {
            //应用
            this.post_arr = [data];
            this.post_arr[0].app_id = parseInt(app_data.app_id);
            this.post_arr[0].spec_id = parseInt(app_data.spec_id);
            this.post_arr[0].duration_method = parseInt(app_data.duration_unit);
            this.post_arr[0].duration = parseInt(app_data.duration);
            this.post_arr[0].id = "";
            this.service_arr.push({});
            this.service_arr[0]["img"] = data.logo;
            this.service_arr[0]["title"] = data.app_name;
            this.service_arr[0]["type"] = data.type_name;
            this.service_arr[0]["auth"] = data.org_name;
            this.service_arr[0]["size"] =
              "规格：" + (app_data.spec_id == 0 ? "部署" : "开发");
            this.service_arr[0]["applytype"] =
              "申请方式：" + (app_data.duration_unit == 1 ? "月" : "年");
            this.service_arr[0]["num"] = app_data.duration;
            this.service_arr[0]["isMg"] = false;
            this.service_arr[0]["isapp"] = true;
          }
        });
    },
    get_one_service(service_data) {
      this.$http
        .get(
          `/apaas/serviceapp/v3/shopcart/serviceinfo?service_id=${service_data.service_id}`
        )
        .then(response => {
          console.log(response);
          let data = response.data.data;
          if (response.data.success && data) {
            //服务
            this.post_arr = [data];
            this.post_arr[0].service_id = parseInt(service_data.service_id);
            this.post_arr[0].spec_id = parseInt(service_data.spec_id);
            this.post_arr[0].duration_method = parseInt(
              service_data.duration_unit
            );
            this.post_arr[0].duration = parseInt(service_data.duration);
            this.post_arr[0].id = "";
            this.service_arr.push({});
            this.service_arr[0]["img"] = data.cover;
            this.service_arr[0]["title"] = data.name;
            this.service_arr[0]["type"] = data.data_service_type1_name;
            this.service_arr[0]["tips"] = [
              {
                tip: this.share_arr[data.openness].name,
                type: this.share_arr[data.openness].val
              }
            ];
            this.service_arr[0]["auth"] = data.organization_name;
            this.service_arr[0]["size"] = "规格：";
            data.request_spcs_info.forEach(el => {
              if (service_data.spec_id == el.id) {
                this.service_arr[0]["size"] =
                  this.service_arr[0]["size"] +
                  "访问次数：" +
                  el.count +
                  ",访问量：" +
                  el.pv +
                  ",";
              }
            });
            this.service_arr[0]["applytype"] =
              "申请方式：" + (service_data.duration_unit == 1 ? "月" : "年");
            this.service_arr[0]["num"] = service_data.duration;
            this.service_arr[0]["isMg"] = data.openness == 3;
            this.service_arr[0]["data"] = JSON.parse(data.res_fields);
            console.log(this.service_arr[0]["data"]);
            this.service_arr[0]["isapp"] = false;
          } else {
            this.$message.error(response.data.errMsg);
          }
        })
        .catch(() => {});
    },
    deal_data(data) {
      data.forEach(e => {
        if (e.selected) {
          e.selected = 1;
        } else {
          e.selected = 0;
        }
        if (e.children && e.children.length) {
          this.deal_data(e.children);
        }
      });
    },
    sub_service() {
      let formInline = this.$refs.apply_info.formInline;
      if (formInline.preson && formInline.phone) {
        var phone_ruler = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
        if (!phone_ruler.test(formInline.phone)) {
          this.$message.error("输入正确号码");
          return;
        }
        var temp = {
          apply_part: {
            o_name: formInline.preson,
            o_mobile: formInline.phone
          },
          carts: []
        };
        var temp1 = this.$refs.apply_service.$refs.apply_service_state;
        this.post_arr.forEach((e, idx) => {
          if (e.service_id) {
            temp.carts.push({
              id: e.id,
              service_id: e.service_id,
              duration: e.duration,
              spec_id: e.spec_id,
              duration_method: e.duration_method,
              is_subscribe: e.is_subscribe,
              app_id: 0,
              scene: temp1[idx].sceneinput,
              apply_file: temp1[idx].fileList,
              apply_fields: []
            });
            // 判断表格ref是否存在
            this.temp_sub_arr = temp1[idx].$refs.apply_service_state_table
              ? temp1[idx].$refs.apply_service_state_table.metaData
              : [];
            this.deal_data(this.temp_sub_arr);
            temp.carts[temp.carts.length - 1][
              "apply_fields"
            ] = this.temp_sub_arr;
          } else {
            temp.carts.push({
              id: e.id,
              service_id: 0,
              duration: e.duration,
              spec_id: e.spec_id,
              duration_method: e.duration_method,
              is_subscribe: e.is_subscribe,
              app_id: e.app_id,
              scene: this.$refs.apply_service.$refs.apply_service_state[idx]
                .sceneinput,
              apply_file: ""
            });
          }
        });
      } else {
        this.$message.error("请完善服务申请");
        return;
      }

      for (let index = 0; index < temp.carts.length; index++) {
        const e = temp.carts[index];
        // 若表格数据长度不为0，执行以下
        if (e.service_id && e.apply_fields.length != 0) {
          if (e.apply_fields[0].selected == 0) {
            this.$message.error("请选择所需参数");
            return;
          }
        }
      }

      this.$http
        .post(`/apaas/serviceapp/v3/shopcart/apply`, temp)
        .then(response => {
          console.log(response);
          if (response.data.success) {
            this.$message.success("申请成功");
            this.$router.replace("/shop/service_application_successfully");
          } else {
            this.$message.error(response.data.errMsg);
          }
        })
        .catch(() => {
          this.$message.error("申请失败");
        });
    },
    get_car_list(car_arr) {
      this.service_arr = [];
      this.post_arr = [];
      this.$http
        .get(`/apaas/serviceapp/v3/shopcart/list`)
        .then(response => {
          console.log(response);
          let data = response.data.data.valid;
          data.forEach(e => {
            if (car_arr.indexOf(e.id) == -1) {
              return;
            }
            this.post_arr.push(e);
            this.service_arr.push({});
            let l = this.service_arr.length - 1;
            if (e.app_id) {
              //应用
              this.service_arr[l]["img"] = e.application.logo;
              this.service_arr[l]["title"] = e.application.app_name;
              this.service_arr[l]["type"] = e.application.type_name;
              this.service_arr[l]["auth"] = e.application.org_name;
              this.service_arr[l]["size"] =
                "规格：" + (e.spec_id == 0 ? "部署" : "开发");
              this.service_arr[l]["applytype"] =
                "申请方式：" + (e.duration_method == 1 ? "月" : "年");
              this.service_arr[l]["num"] = e.duration;
              this.service_arr[l]["isMg"] = false;
              this.service_arr[l]["isapp"] = true;
            } else {
              //服务
              this.service_arr[l]["img"] = e.service.cover;
              this.service_arr[l]["title"] = e.service.name;
              this.service_arr[l]["type"] = e.service.data_service_type1_name;
              this.service_arr[l]["tips"] = [
                {
                  tip: this.share_arr[e.service.openness].name,
                  type: this.share_arr[e.service.openness].val
                }
              ];
              this.service_arr[l]["auth"] = e.service.organization_name;
              this.service_arr[l]["size"] = "规格：";
              e.service.request_spcs_info.forEach(el => {
                if (e.spec_id == el.id) {
                  this.service_arr[l]["size"] =
                    this.service_arr[l]["size"] +
                    "访问次数：" +
                    el.count +
                    ",访问量：" +
                    el.pv +
                    ",";
                }
              });
              this.service_arr[l]["applytype"] =
                "申请方式：" + (e.duration_method == 1 ? "月" : "年");
              this.service_arr[l]["num"] = e.duration;
              this.service_arr[l]["isMg"] = e.service.openness == 3;
              this.service_arr[l]["data"] = e.service.res_fields?JSON.parse(e.service.res_fields):'[]';
              console.log(this.service_arr[l]["data"]);
              this.service_arr[l]["isapp"] = false;
            }
          });
          // this.service_arr =
        })
        .catch(response => {});
    }
  }
};
</script>

<style scoped>
.apply_container {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.footout {
  width: 100%;
  height: 84px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 6px 0px rgba(244, 247, 252, 1);
  border-radius: 12px;
  padding: 20px;
  text-align: right;
  margin: 20px 0;
}
.applybtn {
  color: rgba(252, 239, 214, 1);
  width: 200px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  display: inline-block;
  background-color: rgba(229, 102, 0, 1);
  border-radius: 8px;
  margin-left: 20px;
  cursor: pointer;
}
</style>
