<template>
  <AgreementBody>
    <FlexCol gap="gap.sm">
      <P>甲方：福建省文化和旅游厅</P>
      <FlexRow align="center" wrap gap="gap.sm">
        <Text font-config="p" color="text.content">乙方：</Text>
        <AgreementPrefillInline
          v-model="detail.partyB"
          name="partyB"
          placeholder="请填写乙方（传承人）姓名"
        />
      </FlexRow>
    </FlexCol>

    <Height :height="8" />

    <Text font-config="p" color="text.content" :inner-style="paragraphStyle">
      为传承弘扬中华优秀传统文化，有效保护和传承非物质文化遗产，鼓励和支持国家级非物质文化遗产代表性传承人开展传承活动，根据《中华人民共和国非物质文化遗产法》《国家级非物质文化遗产代表性传承人认定与管理办法》等有关法律法规，制定协议，并按照下列各项条款签署，甲、乙双方共同遵守。
    </Text>
    
    <Height :height="8" />

    <Text font-config="p" color="text.content" :inner-style="paragraphStyle">
      一、甲乙双方应当以习近平新时代中国特色社会主义思想为指导，坚持以人民为中心，弘扬社会主义核心价值观，共同保护传承非物质文化遗产，推动中华优秀传统文化创造性转化、创新性发展。
    </Text>

    <Text font-config="p" color="text.content" :inner-style="paragraphStyle">
      二、甲方按照《国家级非物质文化遗产代表性传承人认定与管理办法》的要求，支持国家级非物质文化遗产代表性传承人开展传承、传播活动。
    </Text>

    <Text font-config="p" color="text.content" :inner-style="paragraphStyle">
      三、甲方按照《国家级非物质文化遗产保护专项资金管理办法》的要求，落实国家给予的代表性传承人的传承补助。
    </Text>

    <Text font-config="p" color="text.content" allow-child-node :inner-style="paragraphStyle">
      四、乙方应积极开展传承活动，培养后继人才，制定传承计划，{{ agreementYear }} 年度带徒
      <AgreementPrefillInline
        v-model="detail.apprentice"
        name="apprentice"
        number-mode
        placeholder="人数"
        suffix="人。"
      />
    </Text>

    <Text font-config="p" color="text.content" :inner-style="paragraphStyle">
      五、乙方应妥善保存相关实物、资料情况。主动保存、提供与该项非遗项目有关的原始资料、实物，配合记录工作。
    </Text>

    <Text font-config="p" color="text.content" :inner-style="paragraphStyle">
      六、乙方应主动、及时配合非遗调查，主动向文化和旅游主管部门、非遗保护中心反映非遗项目保护、传承情况和总结材料，并完成文化和旅游主管部门临时交办的非遗工作任务，提出保护的意见、建议。
    </Text>

    <Text font-config="p" color="text.content" allow-child-node :inner-style="paragraphStyle">
      七、乙方应积极、主动参加各级政府组织的非物质文化遗产公益性宣传活动，{{ agreementYear }} 年度完成
      <AgreementPrefillInline
        v-model="detail.activity"
        name="activity"
        number-mode
        placeholder="场次"
        suffix="场。"
      />
    </Text>

    <Text font-config="p" color="text.content" :inner-style="paragraphStyle">
      八、乙方应合理使用国家级非物质文化遗产代表性传承人补助经费，用于开展非遗项目的传习活动，做好传承补助经费使用记录、支出范围和绩效评价等，不得用于生活补助。
    </Text>

    <Text font-config="p" color="text.content" allow-child-node :inner-style="paragraphStyle">
      九、乙方应积极、主动参加文化和旅游部组织的非物质文化遗产代表性传承人研修班，{{ agreementYear }} 年度完成
      <AgreementPrefillInline
        v-model="detail.course"
        name="course"
        number-mode
        placeholder="场次"
        suffix="场。"
      />
    </Text>

    <Text font-config="p" color="text.content" :inner-style="paragraphStyle">
      十、乙方应积极参与非物质文化遗产相关理论和实践研究、发表（出版）论文、专著等研究。
    </Text>

  </AgreementBody>

  <Height :height="16" />

  <FlexCol :gap="'md'" :inner-style="signBlockStyle">
    <FlexRow padding="space.sm">
      <Text font-config="p" color="text.content" bold>甲方：福建省文化和旅游厅</Text>
    </FlexRow>
    <Field
      label="负责人（代表人）"
      label-position="top"
      disabled
      v-model="detail.partyASign"
      placeholder=""
      :show-bottom-border="true"
    />
    <Field
      label="甲方电话"
      label-position="top"
      name="partyAMobile"
      type="tel"
      disabled
      v-model="detail.partyAMobile"
      placeholder=""
    />
    <AgreementDateWriteBlock
      :model-value="partyAStampDate"
      hint="（以实际盖章日期为准）"
      @update:model-value="emit('update:partyAStampDate', $event)"
    />

    <Height :height="24" />

    <FlexRow padding="space.sm">
      <Text font-config="p" color="text.content" bold>乙方：{{ detail.partyB }}（签名）</Text>
    </FlexRow>
    <Field
      label="乙方签名 / 说明"
      label-position="top"
      name="partyBSign"
      showRightArrow
    >
      <Text>点击签名</Text>
      <template #extra>
        <SignatureField
          v-model="detail.partyBSign"
          placeholder=""
          :upload="uploadAgreementSign"
        />
      </template>
    </Field>
    <Field
      label="身份证号"
      label-position="top"
      name="idCard"
      v-model="detail.idCard"
      placeholder="请填写身份证号"
    />
    <Field
      label="项目名称"
      label-position="top"
      name="ich"
      v-model="detail.ich"
      placeholder="非遗项目名称"
    />
    <Field
      label="身体状况"
      label-position="top"
      name="health"
      v-model="detail.health"
      placeholder="请简要填写"
    />
    <Field
      label="乙方电话"
      label-position="top"
      name="mobile"
      type="tel"
      v-model="detail.mobile"
      placeholder="请填写联系电话"
    />
    <AgreementDateWriteBlock
      :model-value="partyBSignDate"
      hint="（以实际签署日期为准）"
      @update:model-value="emit('update:partyBSignDate', $event)"
    />
  </FlexCol>
</template>

<script setup lang="ts">
import type { AgreementDetail } from '@/api/collect/AssessmentContent';
import type { UploaderAction } from '@/components/form/Uploader';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import Text from '@/components/basic/Text.vue';
import P from '@/components/typography/P.vue';
import Field from '@/components/form/Field.vue';
import SignatureField from '@/components/form/SignatureField.vue';
import AgreementPrefillInline from './AgreementPrefillInline.vue';
import AgreementDateWriteBlock, { type AgreementYmdParts } from './AgreementDateWriteBlock.vue';
import AgreementBody from './AgreementBody.vue';

defineProps<{
  detail: AgreementDetail;
  agreementYear: number;
  partyAStampDate: AgreementYmdParts;
  partyBSignDate: AgreementYmdParts;
  uploadAgreementSign: (item: UploaderAction) => () => void;
}>();

const emit = defineEmits<{
  (e: 'update:partyAStampDate', v: AgreementYmdParts): void;
  (e: 'update:partyBSignDate', v: AgreementYmdParts): void;
}>();

const paragraphStyle = {
  lineHeight: '1.75',
  marginBottom: '12rpx',
};
const signBlockStyle = {
  paddingTop: '8rpx',
  backgroundColor: '#fafafa',
  borderRadius: '16rpx',
  borderWidth: '1rpx',
  borderStyle: 'solid',
  borderColor: '#eeeeee',
  overflow: 'hidden',
};
</script>
